Define a loader in Angular every time route changes
In case you want to add a global loader in your Angular application for a smooth transition between route change.
This loader has to be defined in your top level component in order to be global.
As a result open app.component.html and move the <router-outlet></router-outlet> inside a container element (ex. <main>). This element will be responsible for handling the loading effect, based on the this.loading:boolean value.
The loading boolean value will be handled by the this.router.events subscription which listens all router events.
The events that are important for the loader is the NavigationStart and NavigationEnd. We must also add the NavigationCancel and NavigationError in case that something will not work as it should.