title: How can I detect service variable change when updated from another component?
body: <p>I'm trying to get the updated value from a service variable (<code>isSidebarVisible</code>) which is keeps on updated by another component (<code>header</code>) with a click event (<code>toggleSidebar</code>).</p>
  <p><strong>sidebar.service.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs/Subject';
  
  @Injectable() 
  export class SidebarService {
      isSidebarVisible: boolean;
  
      sidebarVisibilityChange: Subject&lt;boolean&gt; = new Subject&lt;boolean&gt;();
  
      constructor()  {
          this.isSidebarVisible = false;
      }
  
      toggleSidebarVisibilty() {
          this.isSidebarVisible = !this.isSidebarVisible
          this.sidebarVisibilityChange.next(this.isSidebarVisible);
      }
  }
  </code></pre>
  <p><strong>sidebar.component.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>export class SidebarComponent implements OnInit {
      asideVisible: boolean;
      _asideSubscription: any;
  
      constructor(private sidebarService: SidebarService) {
          this.asideVisible = sidebarService.isSidebarVisible
          this._asideSubscription = sidebarService.sidebarVisibilityChange.subscribe((value) =&gt; {
              this.asideVisible = value
          })
      }
      
      ngOnInit() {
      }
  }
  </code></pre>
  <p><strong>header.component.ts (Where service variable is updated)</strong></p>
  <pre class="lang-js prettyprint-override"><code>export class HeaderComponent implements OnInit {
      isSidebarVisible: boolean;
      _subscription: any;
  
      constructor(private sidebarService: SidebarService) {
          this._subscription = sidebarService.sidebarVisibilityChange.subscribe((value) =&gt; {
              this.isSidebarVisible = value
          })
      }
  
      toggleSidebar() {
          this.sidebarService.toggleSidebarVisibilty()
      }
  
      ngOnInit() {
  
      }
  }
  </code></pre>
  <p>I can see the service variable value change in <code>header.component.html</code> when <code>{{ isSidebarVisible }}</code> but In <code>sidebar.component.html</code> it always prints the default value and never listened to the changes.</p>
  <p>Please help me fix this.</p>