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 ?


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.



 ? 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