Showing a global loader between route changes

Building user interfaces that are snappy and fast is key to winning users. The apps become much more enjoyable for the end users and it could bring a lot of value to the owners/creators of the apps. One of the core experiences on the modern web is to show a loader when something is happening in the background. In this recipe, you'll learn how to create a global user interface loader in your Angular app that shows whenever there is a route transition in the app.

Getting ready

The app that we are going to work with resides in start/apps/chapter07/ng-global-loader inside the cloned repository:

1. Open the code repository in your Code Editor.
2. Open the terminal, navigate to the code repository directory and run npm run serve ng-global-loader to serve the project

This should open the app in a new browser tab. And you should see the following:

Figure 7.10 – ng-global-loader app running on http://localhost:4200

Now that we have the app...