How to share data/change between components
<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>