how to load progress when Angular change the page?

Question

When I change the page ,I home the web app shows the progress,when new page loaded finish,the pregress disappear,it looks like the picture below.

I have a way to realize the goal.
Create a service,then add providers in every page component.Secondly,implements OnDestroy and OnAfterContentChecked.In ngOnDestroy,inform the service start the progress,in ngOnAfterContentChecked,inform the service stop the progress.

But that's too troublesome.I think there has a better way to realize the target.Who can help me? Or recommand me a plugin.

A fully automatic loading bar with zero configuration for Angular app : github.com/aitboudad/ngx-loading-bar — willmaz
– willmaz, Commented Jul 31, 2018 at 3:52
You can subscribe to router events at the root of your application. Every time a new NavigationStart event is fired show progress bar and then when the NavigationEnd event is fired hide progress bar. — Narm
– Narm, Commented Jul 31, 2018 at 3:53

Manzer A · Accepted Answer · 2018-07-31 06:37:03Z

1

    constructor(private router: Router, private ngZone: NgZone,
private renderer: Renderer,) {
        router.events.subscribe((event: RouterEvent) => {
          this._navigationInterceptor(event);
        });
      }
     private _navigationInterceptor(event: RouterEvent): void {
        if (event instanceof NavigationStart) {
      // bypass change detection
      this.ngZone.runOutsideAngular(() => {

      });
    }
}
  if (event instanceof NavigationEnd) {

    }

    if (event instanceof NavigationCancel) {

    }
    if (event instanceof NavigationError) {

    }
    }

answered Jul 31, 2018 at 6:37

Manzer A

3,9266 gold badges41 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to load progress when Angular change the page?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related