title: Unable to show spinner in Angular on routing request
body: <p>I'm trying to set up a spinner to show for requests in angular 5.  So far, I've been using the tutorial found here:</p>
  
  <p><a href="https://www.amadousall.com/angular-routing-how-to-display-a-loading-indicator-when-navigating-between-routes/" rel="nofollow noreferrer">https://www.amadousall.com/angular-routing-how-to-display-a-loading-indicator-when-navigating-between-routes/</a></p>
  
  <p>It seems very straight forward; set a boolean to evaluate to either true or false depending on the event.  The only change I really needed to make for my code was to ngx-spinner in the html instead of mat-progress-bar.  However, so far I've been unable to make the spinner show up.</p>
  
  <p>Here is the code for reference, though it is pretty much identical to the link's:</p>
  
  <pre><code>import {Component} from '@angular/core';
  import { NgxSpinnerService } from 'ngx-spinner';
  import {Event, NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router} from '@angular/router';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
      loading = false;
  
      constructor(private router: Router, private spinner: NgxSpinnerService) {
          this.router.events.subscribe((event: Event) =&gt; {
              console.log('Event Occured');
              switch (true) {
                  case event instanceof NavigationStart: {
                      this.loading = true;
                      console.log(this.loading);
                      break;
                  }
                  case event instanceof NavigationEnd:
                  case event instanceof NavigationError:
                  case event instanceof NavigationCancel: {
                      this.loading = false;
                      console.log(this.loading);
                      break;
                  }
                  default: {
                      break;
                  }
              }
          });
      }
  
      /*ngOnInit() {
          /!** spinner starts on init *!/
          this.spinner.show();
  
          setTimeout(() =&gt; {
              /!** spinner ends after 5 seconds *!/
              this.spinner.hide();
          }, 5000);
      }
  */
  
  }
  </code></pre>
  
  <p>And here is the app.component.html:</p>
  
  <pre><code>&lt;ngx-spinner [hidden]="loading==false"
               bdColor = "rgba(51, 51, 51, 0.8)"
               size = "default"
               color = "#ffee00"
               type = "pacman"
  &gt;
  &lt;app-nav&gt;&lt;/app-nav&gt;
  &lt;router-outlet [hidden]="loading==true"&gt;
  &lt;/router-outlet&gt;
  </code></pre>
  
  <p>What I would like is for the spinner to show while <code>loading</code> is true, and for the <code>router-outlet</code>, and the content it provides, to be hidden.  Once <code>loading</code> is false, the spinner will be hidden and the content will be shown.</p>
  
  <p>So far, I've only been able to get the spinner to show when I comment out all the cases except for NavigationStart, preventing <code>loading</code> from ever changing to false.  In addition, I was able to see the content returned by router-outlet behind the spinner, despite the hidden tag on it.  I was able to get it to hide by placing it in a div:</p>
  
  <pre><code>&lt;div [hidden]="loading==true"&gt;
      &lt;app-nav&gt;&lt;/app-nav&gt;
      &lt;router-outlet&gt;
      &lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But that still doesn't solve the fact that when I allow <code>loading</code> to evaluate to false, I never see the spinner in the first place; it instantly loads the components returned by router-outlet.  I'm a beginner at angular, so this is running me up the wall.  Is this simply a case of the loading going to fast for me to see the spinner, or is something else at play?</p>