title: Angular 4: Subscribing to Observable
body: <p>I am working on a project that required clients (not users but more like customers) to be loaded and selected.<br /></p>
  
  <p>Unfortunately I can't seem to subscribe to the Observables I am loading in my component. I have tried every possible solution I could find online but perhaps my inexperience with Angular is preventing me from finding the right one.</p>
  
  <p>What is working right now:<br />
  - loading clients in select box<br />
  - giving value of client' id to option in select box<br />
  - sending client's id to client.service and saving the selected client as an Observable<br /></p>
  
  <p>So my only problem is that the component doesn't notice change in the Observables in client.service.</p>
  
  <p>Here is my client.service.ts:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';
  import { ApiService } from '../api.service';
  import { Client } from './client';
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/filter';
  
  @Injectable()
  export class ClientService {
  
      clients$: Observable&lt;Client[]&gt;;
      client: Client;
      selectedClient$: Observable&lt;Client[]&gt;;
  
      constructor(private api: ApiService) {
          this.clients$ = this.getAll();
      }
  
      public getAll(): Observable&lt;Client[]&gt; {
          return this.api.get&lt;Client[]&gt;('clients');
      }
  
      public setSelectedClient(clientId: number) {
          this.clients$ = this.getAll();
          if (clientId == null) {
              // Do nothing
          } else {
              this.selectedClient$ = this.clients$.map(arr =&gt;
              { return arr.find(client =&gt; client.id === clientId) });
          }
      }
  
      public getSelectedClient() : Observable&lt;Client&gt; {
          return this.selectedClient$;
      }
  
  }
  </code></pre>
  
  <p>My component, with commented bits to show some attempts at fixing my problem:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Observable } from "rxjs/Observable";
  import { ClientService } from "../client/client.service";
  import { Client } from "../client/client";
  import 'rxjs/add/operator/map';
  import 'rxjs/add/operator/filter';
  
  @Component({
      selector: 'app-left-menu',
      templateUrl: './left-menu.component.html',
      styleUrls: ['./left-menu.component.css']
  })
  
  export class LeftMenuComponent implements OnInit {
  
      selectedClient$ : Observable&lt;Client&gt;;
      client: Client = new Client();
      clients$ : Observable&lt;Client[]&gt;;
  
      constructor(private clientService: ClientService) {
  
      }
  
      ngOnInit() {
          // this.clientService.getSelectedClient().subscribe(selectedClient$ =&gt; {
          //     this.selectedClient$ = Observable.of(selectedClient$);
          // });
          // //
          // this.clientService.getAll().subscribe(clients$ =&gt; {
          //     this.clients$ = Observable.of(clients$);
          // });
  
          this.selectedClient$ = this.clientService.getSelectedClient();
          this.clients$ = this.clientService.getAll();
      }
  
      public setSelectedClient(clientId: number) {
          this.clientService.setSelectedClient(clientId);
      }
  
  }
  </code></pre>
  
  <p>And the part of html I use to display and select a client:</p>
  
  <pre><code> &lt;select #selectClient [ngModel]="selectedClient$ | async" 
     (ngModelChange)="setSelectedClient(selectClient.value)"&gt;
          &lt;option *ngFor="let client of clients$ | async" [value]="client.id"&gt;
              {{ client.firstName }}
              {{ client.preposition }}
              {{ client.lastName }}
          &lt;/option&gt;
   &lt;/select&gt;
  
   &lt;!-- Displaying selected client --&gt;
   &lt;h2 *ngIf="selectedClient$"&gt;{{(selectedClient$ | async)?.firstName}}
   &lt;/h2&gt;
  </code></pre>
  
  <p>If anyone could help me out with this it would be MUCH appreciated, thanks!</p>