CODEWITHSUNDEEP
angularroutesloader
vinayakkyadav
vinayakkyadav

Reputation: 59

How to show a spinner loader between the one route to another route in angular 4, I am geeting events but not able to show the loader

I currently working on a project where they require a loader between two routes. I am getting the route events too but I am not able to see the loader 

import { Component } from '@angular/core';
import {
Router,
// import as RouterEvent to avoid confusion with the DOM Event
Event,
NavigationStart,
NavigationEnd,
NavigationCancel,
NavigationError
} from '@angular/router'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'boroughmuir-init-map';

loading = true;

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

 // Shows and hides the loading spinner during RouterEvent changes
 navigationInterceptor(event: Event): 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

  <div class="loader" *ngIf="loading"></div>
  <router-outlet></router-outlet>

Kindly help m,e to solve this issue. I not getting the loader, but I am getting the events in the console.

app.component.css

.loader {
border: 16px solid #BE9F58;
border-radius: 50%;
border-top: 16px solid #212529;
width: 100px;
height: 100px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
position:absolute;
top:50%;
left:calc(50% - 48px);
transform:translateX(-50%) translateY(-50%);
z-index: 1000;
  }

 /* Safari */
 @-webkit-keyframes spin {
   0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
 }

 @keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
 }

the Css for the loader

Upvotes: 0

Views: 1771

Answers (2)

Chellappan வ
Chellappan வ

Reputation: 27303

Remove NavigationCancel and NavigationError, If you are not using route guards in your app, You will get NavigationCancel event only if you have route guards and that return false during navigation. You can check that by passing {enableTracing : true} object in routerModule

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

  navigationInterceptor(event: Event): void {
    if (event instanceof NavigationStart) {
      this.loader = true;
    }
    if (event instanceof NavigationEnd) {
      // Hide loading indicator
      this.timeout = setTimeout(() => {
        clearTimeout(this.timeout);
        this.loader = false;
      }, 1000);
    }
    // if (event instanceof NavigationCancel) {
    //   this.loader = false;
    // }
    // if (event instanceof NavigationError) {
    //    console.log(event);
    //   this.loader = false;
    // }

  }

Example:https://stackblitz.com/edit/angular-spinner-example-bcedjq

Upvotes: 1

Sunny Parekh
Sunny Parekh

Reputation: 983

Just a minor change in your import section:

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.scss']
})
export class AppComponent {
title = 'boroughmuir-init-map';

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) {
  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;
  }
}

}

The event that you are trying to compare needs to be of type RouterEvent and not just normal Event. I hope it helps!

Upvotes: 0

Related Questions