Angular Routing Simple Working Example with loader

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 6 Routing Simple Working Example with loader.

In my last post, I told,  angular-6-routing-simple-working-example

and this post is second part of Angular Routing example with loader.

Here is the working picture:

Here are working and testing code for Angular Routing with loader:

1. For Angular Routing, you can get all the working code from below link:

https://therichpost.com/angular-6-routing-simple-working-example

2. For loader, Just need to add below code into Angular 6 App:

   1. Here is the code for app.component.ts file:

import {Component } from '@angular/core';
import {
  Router,
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
  NavigationStart,
  NavigationEnd,
  NavigationCancel,
  NavigationError
} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
// Sets initial value to true to show loading spinner on first load
  loading = true;

  constructor(private router: Router) {
    router.events.subscribe((event: RouterEvent) => {
      this.navigationInterceptor(event);
    });
  }

  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true;
    }
    if (event instanceof NavigationEnd) {
      setTimeout(() => { // here
        this.loading = false;
      }, 500);
    }

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

    2. Here is the code to add app.component.html file:

<div class="jumbotron text-center">
  <h1>Angular 6 Routing Example</h1>
</div>
<nav class="navbar navbar-expand-sm bg-light">
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" routerLink="/aboutus">About Us</a></li>
  <li class="nav-item"><a class="nav-link" routerLink="/contactus">Contact Us</a></li>
  </ul>
</nav>
<br>

<div class="container-fluid">
<div class="loading-overlay" *ngIf="loading">
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:100%"></div>
  </div>
</div>
<div *ngIf="!loading">
  <h3><router-outlet></router-outlet></h3>
</div>
</div>

 That is it and If have any query related to this post then please ask questions or comment below.