Set a load indicator on page change in Angular2

Question

I did create a directive which set a load indicator (spinner) on the whole page while the page is still loading. My directive has just one argument: should the spinner be displayed or not : <div class="app-container" [busy]=!pageLoaded>

In my app component, I have done the following in the constructor :

    this.pageLoaded = false
    router.subscribe((routeName: String) => {
        /* Other stuff */
        this.pageLoaded= true
    })

This router.subscribe will be called everytime the router is changing (from one page to anotherby instance). The only issue, is that my pageLoaded will keep its true value. How can I set it back to false without triggering my busy directive ?

[Show loading screen when navigating between routes in Angular 2](http://stackoverflow.com/questions/37069609/show-loading-screen-when-navigating-between-routes-in-angular-2/37070282#37070282) might help you. — Ankit Singh, Jun 27 '16 at 07:15

score 0 · Answer 1 · answered Jun 27 '16 at 07:11

what I usually do: Route changes are quite quick. I assume that you want to do some resolve (data fetching) for the routes, right? So in this case I created a http handler that increases a local counter when a request starts and decreases it when a request ends/fails. While there the counter is gt 0 show loader.

In special case if you dont want to show the loader I usually give that as a configuration to the request object and make a decision what to do with the counter based on this set or not.

Regards

Set a load indicator on page change in Angular2

1 Answers1