title: How to include a loading spinner in an angular application?
body: <p>I am trying to add a spinner to my application but the spinner is not appearing. </p>
  
  <p>There are no errors appearing in the console or terminal, yet the spinner is not appearing. </p>
  
  <h2>loader.service.ts</h2>
  
  <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) {
      this.status.next(value);
  }
  }
  </code></pre>
  
  <h2>app.module.ts</h2>
  
  <p>imported LoadService and added it to the providers array </p>
  
  <h2>app.component.ts</h2>
  
  <pre><code>import { LoaderService } from './services/loader.service';
  
  export class AppComponent {
    //for the spinner
    showLoader: boolean;
    //LoaderService is for the spinner
    constructor(private loaderService: LoaderService) { }
    //for the spinner
    ngOnInit() {
      this.loaderService.status.subscribe((val: boolean) =&gt; {
        this.showLoader = val;
      });
    }
  }
  </code></pre>
  
  <h2>app.component.html</h2>
  
  <pre><code>&lt;router-outlet&gt;
  &lt;div *ngIf="showLoader"&gt;
  &lt;mat-spinner&gt;&lt;/mat-spinner&gt;
  &lt;/div&gt;
  &lt;/router-outlet&gt;
  </code></pre>
  
  <h2>custom.component.ts</h2>
  
  <pre><code>import { LoaderService } from '../services/loader.service';
  
  export class SurveyresultsComponent implements OnInit {
  
   constructor(private loaderService: LoaderService) { }
  
   ngOnInit() {
    //http call starts
    this.loaderService.display(true);
    //http call ends
    this.loaderService.display(false);
   }
  }
  </code></pre>