title: How to share data/change between components
body: <p>So let's say you have an interface that has a toolbar, sidebar, and a grid.  The toolbar has a drop-down that when a user changes, the content in sidebar and grid changes.  Back in Angular 1, I would use a Service to have all of my dynamic data.  When something changes in the service, all components that use that service will  update as well.  </p>
  
  <p>Well in Angular 2, it looks like people are using different methods.  I wanted to get your input on which is the preferred way.</p>
  
  <ul>
  <li>Static Service</li>
  <li>OnChanges</li>
  <li>Inputs and Outputs</li>
  </ul>
  
  <p>The remaining question that I have is if it's best practice to create a new service for each data item that is shared between components or can we just have one service that has an object that stores all shared data.</p>
  
  <p><kbd>
  <a href="http://plnkr.co/edit/vL76b0UjrAav3Ao7kF4W?p=preview" rel="nofollow noreferrer">Original Plunker</a>
  </kbd> - Each change will have its own service</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {NavService} from '../services/NavService';
  
  @Component({
    selector: 'obs-comp',
    template: `obs component, item: {{item}}`
  })
  export class ObservingComponent {
    item: number;
    subscription: any;
    constructor(private _navService:NavService) {}
    ngOnInit() {
      this.item = this._navService.navItem();
      this.subscription = this._navService.navChange$.subscribe(
        item =&gt; this.selectedNavItem(item));
    }
    selectedNavItem(item: number) {
      this.item = item;
    }
    ngOnDestroy() {
      this.subscription.unsubscribe();
    }
  }
  
  @Component({
    selector: 'my-nav',
    template:`
      &lt;div class="nav-item" (click)="selectedNavItem(1)"&gt;nav 1 (click me)&lt;/div&gt;
      &lt;div class="nav-item" (click)="selectedNavItem(2)"&gt;nav 2 (click me)&lt;/div&gt;
    `,
  })
  export class Navigation {
    item = 1;
    constructor(private _navService:NavService) {}
    selectedNavItem(item: number) {
      console.log('selected nav item ' + item);
      this._navService.changeNav(item);
    }
  }
  
  @Component({
    selector: 'my-app',
    template: `{{title}}
    &lt;p&gt;
    &lt;my-nav&gt;&lt;/my-nav&gt;
    &lt;button (click)="showObsComp = !showObsComp"&gt;toggle ObservingComponent&lt;/button&gt;
    &lt;div *ngIf='showObsComp'&gt;
      &lt;obs-comp&gt;&lt;/obs-comp&gt;
    &lt;/div&gt;
    `,
    directives: [Navigation, ObservingComponent]
  })
  export class AppComponent {
    title = "Angular 2 - event delegation";
    showObsComp = true;
    constructor() { console.clear(); }
  }
  
  </code></pre>
  
  <p><strong>NavService.ts</strong>:</p>
  
  <pre><code>import {Observable} from 'rxjs/Observable';
  import 'rxjs/add/operator/share';
  
  export class NavService {
    private _navItem = 0;
    navChange$: Observable&lt;number&gt;;
    private _observer: Observer;
    constructor() {
      this.navChange$ = new Observable(observer =&gt;
        this._observer = observer).share();
      // share() allows multiple subscribers
    }
    changeNav(number) {
      this._navItem = number;
      this._observer.next(number);
    }
    navItem() {
      return this._navItem;
    }
  }
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;User Input&lt;/title&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.11/angular2-polyfills.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/tools/system.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.11/Rx.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.angularjs.org/2.0.0-beta.11/angular2.dev.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        System.config({
          transpiler: 'typescript', 
          typescriptOptions: { emitDecoratorMetadata: true }, 
          packages: {
            app:      {defaultExtension: 'ts'},
            services: {defaultExtension: 'ts'},
          } 
        });
        System.import('app/boot')
              .then(null, console.error.bind(console));
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;my-app&gt;Loading...&lt;/my-app&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app/boot.ts</strong></p>
  
  <pre><code>import {bootstrap} from 'angular2/platform/browser';
  import {AppComponent} from './app.component';
  import {NavService} from '../services/NavService';
  
  bootstrap(AppComponent, [NavService]);
  </code></pre>
  
  <p><kbd>
  <a href="http://plnkr.co/edit/2s0PaKBVTCzI5iBvZylU?p=preview" rel="nofollow noreferrer">Revised Plunker for example</a>
  </kbd> - Only one service which stores all data in object.  A type will be passed to each listener to check if it needs to do anything based on that type.</p>