title: How to subscribe service in Angular
body: <p>i have 3 objects:
  - first component
  - connect service
  - second component</p>
  
  <p>First component when is folded/expanded should expand/fold second component via service.</p>
  
  <p>In service i have function toggle() and it should only change a bool variable of boolean isOpen. Next to it i have other function getIsOpen() with return type Observable. Code looks like this:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/internal/Observable';
  import { of } from 'rxjs/internal/observable/of';
  
  @Injectable()
  export class ConnectService {
    public isOpen = false;
  
    public toggle(): void {
      this.isOpen = !this.isOpen;
      console.log('Im inside toggle');
    }
  
    public getIsOpen(): Observable&lt;boolean&gt;{
      console.log('Im inside getIsOpen');
      return of(this.isOpen);
    }
  }
  </code></pre>
  
  <p>In second component i try to subscribe:</p>
  
  <pre><code>public ngOnInit(): void {
    this.connectionService.getIsOpen().subscribe(x =&gt; this.isFirstComponentExpanded = x);
  }
  </code></pre>
  
  <p>But only effect is only after the page load, after click, the second component didn't fold or expand. How to listen every change inside service without event emmiter (i need to avoid any event emitters there, only observables, subscribes and subjects).</p>