Sunday, July 12, 2020

Angular Routing Simple Working Example with loader

Angular 6 Routing Simple Working Example with loader - The Rich Post


Hello to all, welcome to 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:
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 {
  // import as RouterEvent to avoid confusion with the DOM Event
  Event as RouterEvent,
} from '@angular/router';
  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) { 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) {
      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>
<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>

<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 *ngIf="!loading">

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

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.