title: Angular 2 - Using Shared Service
body: <p>Looks like shared services is the best practice to solve many situations such as communication among components or as replacement of the old $rootscope concept of angular 1. I'm trying to create mine, but it's not working. Any help ? ty !!!</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {OtherComponent} from './other.component';
  import {SharedService} from './services/shared.service';
  @Component({
  selector: 'my-app',
  providers: [SharedService],
  directives: [OtherComponent],
  template: `
      &lt;button (click)="setSharedValue()"&gt;Add value to Shared Service&lt;/button&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;other&gt;&lt;/other&gt;
  `
  })
  export class AppComponent { 
  data: string = 'Testing data';
  setSharedValue(){
      this._sharedService.insertData(this.data);
      this.data = '';
      console.log('Data sent');
  }
  constructor(private _sharedService: SharedService){}
  }
  </code></pre>
  
  <p>other.component.ts</p>
  
  <pre><code>import {Component, OnInit} from "angular2/core";
  import {SharedService} from './services/shared.service';
  @Component({
  selector : "other",
  providers : [SharedService],
  template : `
  I'm the other component. The shared data is: {{data}}
  `,
  })
  export class OtherComponent implements OnInit{
  data: string[] = [];
  constructor(private _sharedService: SharedService){}
  ngOnInit():any {
      this.data = this._sharedService.dataArray;
  }
  }
  </code></pre>