title: Observable next() callback not triggered
body: <p>I'm trying to implement a global loading indicator that can be reused in the entire application. I have an injectable service that has the show and hide functions:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs';
  
  @Injectable()
  export class SpinnerOverlayService {
      private loaderSubject = new Subject&lt;any&gt;();
  
  
      public loaderState = this.loaderSubject.asObservable();
  
      constructor() { }
  
      /**
       * Show the spinner
       */
      show(): void {
          this.loaderSubject.next(&lt;any&gt;{ show: true });
      }
  
      /**
       * Hide the spinner
       */
      hide(): void {
          this.loaderSubject.next(&lt;any&gt;{ show: false });
      }
  }
  </code></pre>
  
  <p>And this is the code of the spinner overlay component. I'll exclude details about the HTML and CSS implementation as they're not important here.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Subscription } from 'rxjs';
  import { SpinnerOverlayService } from '../spinner-overlay.service';
  
  @Component({
    selector: 'spinner-overlay',
    templateUrl: './spinner-overlay.component.html',
    styleUrls: ['./spinner-overlay.component.scss']
  })
  export class SpinnerOverlayComponent implements OnInit {
  
    show = false;
  
    private _subscription: Subscription;
  
    constructor(private spinnerOverlayService: SpinnerOverlayService) { }
  
    ngOnInit(): void {
      this._subscription = this.spinnerOverlayService.loaderState.subscribe((state) =&gt; {
          console.log("Subscription triggered.");
          this.show = state.show;
        });
    }
  
    ngOnDestroy(): void {
      this._subscription.unsubscribe();
    }
  }
  </code></pre>
  
  <p>The problem: In the code of the overlay component I'm subscribing to the observable loaderState of the service. However when I call the show() function which triggers the next() of the observable, the subscription callback is not triggered.</p>
  
  <p>This is how I call the show() function in the app.component.ts:</p>
  
  <pre><code>ngOnInit() {
                 this.spinnerOverlayService.show();
  }
  </code></pre>
  
  <p>What could I be missing? Seems really strange that the callback is not triggered.</p>
  
  <p>Here is an example in Stackblitz: <a href="https://stackblitz.com/edit/angular-7-registration-login-example-2qus3f?file=app%2Fspinner-overlay%2Fspinner-overlay.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-7-registration-login-example-2qus3f?file=app%2Fspinner-overlay%2Fspinner-overlay.component.ts</a></p>