Set a load indicator on page change in Angular2

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 ?


ANSWERS:


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



 MORE:


 ? Angular2 dynamic change CSS property
 ? Angular2 working indicator
 ? Angular2 router (@angular/router), how to set default route?
 ? Multiple template bindings on angular2 element
 ? Browser refresh doesnt load angular2 component but gives 404
 ? Is Angular 2's Router broken when using HTML5 routes?
 ? Is Angular 2's Router broken when using HTML5 routes?
 ? Is Angular 2's Router broken when using HTML5 routes?
 ? Angular2 routing how to go to base directory
 ? How to cope with refreshing page with JS History API pushState