Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 resolver with loading indicator

I use resolvers to load the data into the components, but until the data is not returned from the server the component does not load. I would like to know if there is a way to render a load indicator before the server responds.

like image 833
yamidvo Avatar asked Feb 05 '17 03:02

yamidvo


People also ask

Should I use resolver in angular?

Angular Route Resolver is used for pre-fetching some of the data when the user is navigating from one route to another. It can be defined as a smooth approach for enhancing user experience by loading data before the user navigates to a particular component.

What is the use of resolve object in routing?

A data provider class can be used with the router to resolve data during navigation. The interface defines a resolve() method that is invoked right after the ResolveStart router event. The router waits for the data to be resolved before the route is finally activated.


1 Answers

You can use the "reacting to routing events" strategy that consist to implement the App to react when any routing event occurs. To do that, you will need in your app.component.ts some code like:

import { Component } from '@angular/core'; import { Router, RouterEvent, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';  @Component({   selector: 'app-root',   templateUrl: './app.component.html',   styleUrls: ['./app.component.sass'] }) export class AppComponent {    loading: boolean = true;    constructor(private router: Router) {     router.events.subscribe((routerEvent: RouterEvent) => {       this.checkRouterEvent(routerEvent);     });   }    checkRouterEvent(routerEvent: RouterEvent): void {     if (routerEvent instanceof NavigationStart) {       this.loading = true;     }      if (routerEvent instanceof NavigationEnd ||       routerEvent instanceof NavigationCancel ||       routerEvent instanceof NavigationError) {       this.loading = false;     }   } } 

And in the view(html) something like:

<div id="loader" class="myloader" *ngIf="loading">   Loading... </div> 
like image 63
yaircarreno Avatar answered Oct 14 '22 07:10

yaircarreno