Get and update a string through a service in Angular 2
<p>I'm trying to better understand services by means of a very simple application which gets and updates the value of string within a service and displays it in a component.</p>

<p>Here's the service:</p>

<pre><code>import {Injectable} from 'angular2/core';

@Injectable()
export class SharedService {
  dataString: string;

  insertData(data) {
    this.dataString = data
  }
}
</code></pre>

<p>Here's the main 'app' component:</p>

<pre><code>import {Component}      from 'angular2/core';
import {OtherComponent} from './other';
import {SharedService}  from'./shared.service';

@Component({
  selector: 'my-app',
  providers: [SharedService],
  directives: [OtherComponent],
  template: `
    &lt;input type="text" #someValue&gt;
    &lt;button (click)="setSharedValue(someValue.value)"&gt;Change value in shared service&lt;/button&gt;
    &lt;br&gt;&lt;br&gt;
    &lt;other&gt;&lt;/other&gt;
  `
})
export class AppComponent { 
  constructor(private _sharedService: SharedService){}

  setSharedValue(value){
    this._sharedService.insertData(value);
  }

}
</code></pre>

<p>...and here's the 'other' component:</p>

<pre><code>import {Component, OnInit} from 'angular2/core';
import {SharedService} from './shared.service';

@Component({
  selector : "other",
  template : `
    I'm the other component. The shared data is: 
    &lt;p&gt;{{data}}&lt;/p&gt;
  `,
})
export class OtherComponent implements OnInit{
  data: string;
  constructor(private _sharedService: SharedService){}
  ngOnInit() {
    this.data = this._sharedService.dataString;
  }
}
</code></pre>

<p><a href="https://plnkr.co/edit/wdwQdY8JI4qVBtQk82Ro?p=preview" rel="noreferrer">Here's a plunkr.</a></p>

<p>When text is added to the input and the button is clicked I want to display the value entered in the 'other' component, just to demonstrate getting and setting the service data.  However, it's just silently failing.</p>

<p>Can anyone explain what I'm doing wrong?</p>

<p>Thanks</p>