Show Load Spinner on Angular2 Route Navigate
<p>I have seen (<a href="https://stackoverflow.com/questions/37069609/show-loading-screen-when-navigating-between-routes-in-angular-2">this question</a>) and its Answer from @borislemke. </p>

<p>Actaully, tried on Angular2 Demo Application but its not changing Loader Div Background color while Navigating to another route. </p>

<p>My AppComponent is as follows,</p>

<pre><code>import { Component, OnInit }          from '@angular/core';
import { Router, ROUTER_DIRECTIVES, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
import {NgClass} from '@angular/common';

import { DialogService }  from './dialog.service';
import { HeroService }    from './heroes/hero.service';

@Component({
  selector: 'my-app',
  template: `
    &lt;h1 class="title"&gt;Component Router&lt;/h1&gt;
    &lt;div&gt;Is Navigating --&gt;  {{isLoading}}&lt;/div&gt;

    &lt;div [ngClass]="{afterLoad: !isLoading, loading: isLoading }" &gt; Loader Spinner Container &lt;/div&gt;

    &lt;nav&gt;
      &lt;a routerLink="/crisis-center" routerLinkActive="active"
         routerLinkActiveOptions="{ exact: true }"&gt;Crisis Center&lt;/a&gt;
      &lt;a routerLink="/heroes" routerLinkActive="active"&gt;Heroes&lt;/a&gt;
      &lt;a routerLink="/crisis-center/admin" routerLinkActive="active"&gt;Crisis Admin&lt;/a&gt;
      &lt;a routerLink="/login" routerLinkActive="active"&gt;Login&lt;/a&gt;
    &lt;/nav&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  `,
  styles:[`
    .loading{
    background-color:red
    }

    .afterLoad{
    background-color:yellow
    }
  `],
  providers:  [
    HeroService,
    DialogService
  ],
  directives: [ROUTER_DIRECTIVES, NgClass]
})
export class AppComponent implements OnInit {
    isLoading: boolean = false;

   constructor(private _router:Router) {}

    ngOnInit() {
        // TODO: assign proper type to event
        this._router.events.subscribe((event: any): void =&gt; {
            this.navigationInterceptor(event);
        });
    }

    navigationInterceptor(event): void {
        if (event instanceof NavigationStart) {
            this.isLoading = true;
        }
        if (event instanceof NavigationEnd) {
            this.isLoading = false;
        }
        if (event instanceof NavigationCancel) {
            this.isLoading = false;
        }
        if (event instanceof NavigationError) {
            this.isLoading = false;
        }
    }
}
</code></pre>

<p>My plunker is <a href="http://plnkr.co/edit/7OdhoMANVK7HvtBnI8js?p=preview" rel="nofollow noreferrer">here</a> for live test.</p>

<p>Can anyone help me figuring out the possible cause of failure?</p>

<p>Thanks. </p>