How to share data between components using a service properly?
<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>