title: How to share data between components using a service properly?
body: <p>I am learning angular2 and was able to share data between sibling components using input/output. </p>
  
  <p><a href="http://plnkr.co/edit/zW5c8d1HJQ32qJtCHTTS?p=info" rel="noreferrer">Here</a> is my working example.</p>
  
  <pre><code>//our root app component
  import {Component, NgModule} from '@angular/core'
  import {BrotherComponent} from './brother.component'
  import {SisterComponent} from './sister.component'
  import {BrowserModule} from '@angular/platform-browser'
  import {FormsModule, ReactiveFormsModule} from '@angular/forms'
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;h2&gt;Hello {{name}}&lt;/h2&gt;
        &lt;brother (onChange)="handleBrotherEvent($event)" [dataFromSister]="dataFromSister"&gt;&lt;/brother&gt;
        &lt;sister (onChange)="handleSisterEvent($event)" [dataFromBrother]="dataFromBrother"&gt;&lt;/sister&gt;
      &lt;/div&gt;
    `,
  })
  export class App {
    name:string;
    constructor() {
      this.name = 'Angular2'
    }
  
    handleBrotherEvent(data)
    {
      this.dataFromBrother = data;
      console.log("called from handleBrotherEvent in app", data); 
    }
  
    handleSisterEvent(data)
    {
      this.dataFromSister = data;
      console.log("called from sister handleSisterEvent in app", data); 
    }
  }
  
  @NgModule({
    imports: [ BrowserModule, FormsModule, ReactiveFormsModule ],
    declarations: [ App, BrotherComponent, SisterComponent ],
    bootstrap: [ App ]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>Now I want to learn about services and see how I can share my data through that. I have tried to look at the angular.io documentation to understand communication between components using a service, but I am still confused on how to get this working with my example. Here is the section I have been reading:</p>
  
  <p><a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service" rel="noreferrer">https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service</a></p>
  
  <p>I am looking for a concrete example to convert my original example to share component form data using a service. Is there somebody that can help me?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Based off the below comments, I changed my plnkr to this. Hopefully this is how its supposed to work. </p>
  
  <p><a href="http://plnkr.co/edit/zW5c8d1HJQ32qJtCHTTS?p=preview" rel="noreferrer">http://plnkr.co/edit/zW5c8d1HJQ32qJtCHTTS?p=preview</a></p>