title: Observable value is not updating
body: <p>I am trying to use a service in Angular that holds the state of the application in a string variable. I am using RxJS to use BehaviorSubject, and then my components subscribe to an observable of the BehaviorSubject.</p>
  <h1>State.Service.ts</h1>
  <pre><code>import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { Injectable } from '@angular/core';
  
  
  @Injectable()
  export class StateService {
  
    private sourceState = new BehaviorSubject&lt;string&gt;('Default State');
    currentState = this.sourceState.asObservable();
  
    constructor() { }
  
    setState(state: string) {
      this.sourceState.next(state);
      console.log(this.currentState);
      }
  }
  </code></pre>
  <p>My components all subscribe to this observable during the NgOnInit lifecycle.</p>
  <h1>Nav.component.ts</h1>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AuthService } from '../../services/auth.service';
  import { StateService } from '../../services/state.service';
  import { Router } from '@angular/router';
  import 'rxjs/add/operator/filter';
  import { Location } from '@angular/common';
  
  @Component ({
    selector: 'app-nav',
    templateUrl: './nav.component.html',
    styleUrls: ['./nav.component.scss'],
    providers: [StateService]
  })
  export class NavComponent implements OnInit {
    currentState: string;
  
    constructor(
      private authService: AuthService,
      private router: Router,
      private stateService: StateService
    ) {}
  
    ngOnInit() {
      this.stateService.currentState.subscribe(
        state =&gt; (this.currentState = state)
      );
    }
  
    logout() {
      this.authService.logout();
    }
    
    changeState(state: string) {
      this.stateService.setState(state);
    }
  }
  </code></pre>
  <p>Other components in my application will call the setState function in the state.service.ts file. I am binding the state value in my template just to watch the value so I can then use directives to change the experience based on application state.</p>
  <h1>The Problem</h1>
  <p>Values in the components are not changing even though when I console.log the observable I can see it is being set correctly.</p>
  <h2>Note</h2>
  <p>When I call the setState function within the nav component I do see the value of the string interpolation change but only in the nav.component.ts, other components will not change. It is almost like they are using clones of the observable.</p>
  <h1>nav.component.html</h1>
  <pre><code>&lt;nav class=&quot;navbar&quot; [ngClass]=&quot;{red: currentState==='stove'}&quot;&gt;
    &lt;a  class=&quot;navbar-brand&quot; routerLink=&quot;/app&quot;&gt;
      &lt;img src=&quot;../assets/img/app/back.svg&quot; alt=&quot;&quot;&gt;
    &lt;/a&gt;
    &lt;ul class=&quot;nav justify-content-end&quot;&gt;
      &lt;li class=&quot;nav-item&quot;&gt;
        &lt;a class=&quot;nav-link active&quot; routerLink=&quot;/login&quot; (click)=&quot;logout()&quot;&gt;Logout
          &lt;i class=&quot;fa fa-sign-out&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  {{ currentState }}
  </code></pre>