Ivan Ivan - 1 month ago 12
TypeScript Question

How to display waiter while resolving data in Angular 2.0.0?

I've project based on Angular 2.0.0, and I want to display waiter (gif or text) while navigating routes, which must resolve data like this:

{
path: 'profile',
loadChildren: () => System.import('../profile/profile.module'),
resolve: {
profile: ProfileResolver
},
},


Also, preloader need to be applied to every route in project.
Thanks.

Answer

I'd say you can create a service which would keep eye on routing events and based on NavigationStart & NavigationEnd event it will show/hide loading based on isLoading flag value with combination of [hidden].

Code

isLoading: bool = false;
constructor(router:Router) {
  router.events.subscribe(event:Event => {
    if(event instanceof NavigationStart) {
       this.isLoading = true;
    }
    if(event instanceof NavigationCancel || event instanceof NavigationError) {
       this.isLoading = false;
    }
  }
}