Ivan Ivan - 1 year ago 108
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.

Answer Source

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].


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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download