title: How transfer data from component to another component wia Subject/Observable?
body: <p>I find interesting example how transfer data from one component to another component using Subject/Observable in Service: </p>
  
  <p><a href="http://plnkr.co/edit/yMBoVkxohwhPig5COgkU?p=preview" rel="nofollow">http://plnkr.co/edit/yMBoVkxohwhPig5COgkU?p=preview</a></p>
  
  <p>I find it similar to broadcast event from Angular 1.X. But I notice that subscribe to data changes can only component that inishiated data change. I need somehow modify this example to get data in one component after another component changed it. Console.log dos't show any error, but data-transfer not working. Can anyone help?</p>
  
  <p>Service:</p>
  
  <pre><code>@Injectable()
  export class ClientsService {
  
      private _client$: Subject&lt;Client&gt;;
      private _clients$: Subject&lt;Client[]&gt;;
  
      constructor(private http: Http) {
          this._client$ = &lt;Subject&lt;Client&gt;&gt;new Subject();
          this._clients$ = &lt;Subject&lt;Client[]&gt;&gt;new Subject();
      }
  
      getClients(): Promise&lt;Client[]&gt; {
          return this.http.get('api/Client')
              .toPromise()
              .then(res =&gt; {
                  this._clients$.next(res.json());
                  return res.json();
              })
              .catch(this.handleError);
      }
  
      get client$() {
          return this._client$.asObservable();
      }
  
      get clients$() {
          return this._clients$.asObservable();
      }
  
      clientChangeBroadcast(objClient: Client) {
          this._client$.next(objClient);
      }
  
      clientsChangeBroadcast(arrClients: Client[]) {
          this._clients$.next(arrClients);
      }
  
      private handleError(error: any): Promise&lt;any&gt; {
          return Promise.reject(error.message || error);
      }
  </code></pre>
  
  <p>First component:</p>
  
  <pre><code>@Component({
      selector: 'app',
      templateUrl: './app/app.component.html'
  })
  export class AppComponent implements OnInit {
      clients: Client[];
  
      constructor(public clientsService: ClientsService) {
          this.clients = [];
  
      }
  
      ngOnInit() {
  
      }
  
      loadClients() {
          this.clientsService.getClients().then(clients =&gt; {
              this.clients = clients;
              this.clientsService.clientsChangeBroadcast(clients);
          });
      }
  
      selectClient(objClient: Client) {
          this.clientsService.getClients();
          this.clientsService.clientChangeBroadcast(objClient);
      }
  }
  </code></pre>
  
  <p>Second component:</p>
  
  <pre><code>export class TestComponent implements OnInit {
      client: Observable&lt;Client&gt;;
      clients: Observable&lt;Client[]&gt;;
  
      constructor(private clinetsService: ClientsService) {
  
      }
  
      ngOnInit() {
  
              //this.clinetsService.getClients();
  
              this.client = this.clinetsService.client$;
              this.clients = this.clinetsService.clients$;
  
              this.clinetsService.client$.subscribe(value =&gt; {
                  // try to get changes here
  
              });
  
              this.clinetsService.clients$.subscribe(value =&gt; {
                  // try to get changes here
  
              });
      }
  
      reLoadClients() {
          this.clinetsService.getClients();
      }
  
  }
  </code></pre>
  
  <p>I try to get data changinf in 'Second component' after data was changed by 'First component'. When I click on button for 'selectClient' method in 'First component' I expect data transfer wia service and I catch changes ob 'Second component' -> it not working. When from 'Second component' I press button for 'reLoadClients' data transfer wia service and I catch changes in all subscribe functions on 'Second component'.</p>