Show loading screen when navigating between routes in Angular 2+


The current Angular Router provides Navigation Events. You can subscribe to these and make UI changes accordingly. Remember to count in other Events such as NavigationCancel and NavigationError to stop your spinner in case router transitions fail.

app.component.ts – your root component

import {
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
} from '@angular/router'

export class AppComponent {

  // Sets initial value to true to show loading spinner on first load
  loading = true

  constructor(private router: Router) { : RouterEvent) => {

  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true
    if (event instanceof NavigationEnd) {
      this.loading = false

    // Set loading state to false in both of the below events to hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this.loading = false
    if (event instanceof NavigationError) {
      this.loading = false

app.component.html – your root view

<div class="loading-overlay" *ngIf="loading">
    <!-- show something fancy here, here with Angular 2 Material's loading bar or circle -->
    <md-progress-bar mode="indeterminate"></md-progress-bar>

Performance Improved Answer: If you care about performance there is a better method, it is slightly more tedious to implement but the performance improvement will be worth the extra work. Instead of using *ngIf to conditionally show the spinner, we could leverage Angular’s NgZone and Renderer to switch on / off the spinner which will bypass Angular’s change detection when we change the spinner’s state. I found this to make the animation smoother compared to using *ngIf or an async pipe.


Please enter your comment!
Please enter your name here