title: loading spinner using rxjs BehaviorSubject
body: <p>I created a loading spinner component for my <strong>angular 4</strong> app that should show during AJAX calls but I have trouble displaying it with a subscription to a <strong>BehaviorSubject</strong>.</p>
  
  <p>This question is related to <a href="https://stackoverflow.com/questions/44940104/how-to-show-a-spinner-till-the-time-data-recieved-from-the-server-in-angular2">how to show a spinner till the time data recieved from the server in angular2</a> but not a duplicate (as I want to do it with a reusable component) and <a href="https://stackoverflow.com/questions/39681303/angular-2-rxjs-behaviorsubject-subscribe-call-not-working">Angular 2 + RxJS BehaviorSubject subscribe call not working</a> (Though I don't see any difference between my code and the accepted answer. Did I miss something?)</p>
  
  <p>I basically followed this tutorial <a href="https://hassantariqblog.wordpress.com/2017/03/22/angular2-using-custom-loader-spinner-as-service-in-angular-2-application/" rel="nofollow noreferrer">https://hassantariqblog.wordpress.com/2017/03/22/angular2-using-custom-loader-spinner-as-service-in-angular-2-application/</a></p>
  
  <p>Here's some of my code:</p>
  
  <p><strong>app.modules.ts</strong></p>
  
  <pre><code>import {AppComponent} from './app.component';
  import {AppRoutingModule} from './app-routing.module';
  import {SomeComponent} from './some.component';
  import {LoaderComponent} from './loader/loader.component';
  import {LoaderService} from './loader/loader.service';
  
  @NgModule({
      declarations: [
          AppComponent,
          LoaderComponent,
          SomeComponent
      ],
      imports: [
          BrowserModule,
          NoopAnimationsModule,
          AppRoutingModule
      ],
      providers: [
          LoaderService
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;app-loader&gt;&lt;/app-loader&gt;
  </code></pre>
  
  <p><strong>loader.component.html</strong></p>
  
  <pre><code>&lt;div class="loader" *ngIf="isLoading"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>loader.component.ts</strong></p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {LoaderService} from './loader.service';
  
  @Component({
      selector: 'app-loader',
      templateUrl: 'loader.component.html',
      providers: [LoaderService]
  })
  
  export class LoaderComponent implements OnInit {
      isLoading: boolean;
  
      constructor(private loaderService: LoaderService) {
      }
  
      ngOnInit() {
          this.loaderService.status.subscribe((val: boolean) =&gt; {
              this.isLoading = val;
          });
      }
  }
  </code></pre>
  
  <p><strong>loader.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  
  @Injectable()
  export class LoaderService {
      public status: BehaviorSubject&lt;boolean&gt; = new BehaviorSubject&lt;boolean&gt;(false);
  
      display(value: boolean) {
          console.log('LoaderService.display ' + value);
          this.status.next(value);
      }
  }
  </code></pre>
  
  <p><strong>A method in some service that does an AJAX call</strong></p>
  
  <pre><code>constructor(private http: Http, private loaderService: LoaderService) {
  }
  
  getSomeStuff(): Observable&lt;SomeItem[]&gt; {
      // show the loading spinner
      this.loaderService.display(true);
  
      const content = this.http.get(this.apiUrl)
          .map(this.extractData);
  
      content.subscribe(
          () =&gt; {
              // hide the loading spinner
              this.loaderService.display(false);
          }
      );
  
      return content;
  }
  </code></pre>
  
  <p>The problem is that the loader never gets shown, because <code>isLoading</code> is never set to <code>true</code>. The console output:</p>
  
  <pre><code>LoaderComponent subscription false
  LoaderService.display true
  LoaderService.display false
  </code></pre>
  
  <p>So the subscription to the loaderService, that changes the value of <code>isLoading</code> in loader.component.ts only gets called once, when initializing the component. But as far as I understand how <strong>BehaviorSubject</strong> should work, it should be called, whenever <code>LoaderService.status</code> changes. Why not? What am I doing wrong?</p>