Angular route loading indicator

In this video we will discuss how to display a loading indicator if there is a delay when navigating from one route to another route in an angular application.

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

Text version of the video
http://csharp-video-tutorials.blogspot.com/2018/06/angular-route-loading-indicator.html

Slides
http://csharp-video-tutorials.blogspot.com/2018/06/angular-route-loading-indicator-slides.html

All GridView Text Articles
http://csharp-video-tutorials.blogspot.com/p/free-asp.html

All GridView Slides
http://csharp-video-tutorials.blogspot.com/p/blog-page.html

Complete GridView Tutorial in arabic
https://www.youtube.com/playlist?list=PL4cyC4G0M1RSX3ymTIIlt97tdkCIo9TAw

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatArabic/playlists

At the moment in our application, when we navigate to the LIST route, it will take 2 seconds to pre-fetch data required for the LIST route. This is because, we have a route resolver configured on the LIST route. We implemented this route resolver in Part 54 of Angular CRUD tutorial.

During the 2 seconds wait time, while the route resolve guard is busy retrieving the required data, we want to display a loading indicator, so the user knows the application is busy processing the request and he does not end up clicking on the link multiple times.

To implement the loading indicator, we are going to make use of the Angular Router Navigation events. We discussed these events in our previous video. These navigation events range from when the navigation starts and ends to many points in between. When the navigation starts, we want to show the loading indicator, and when the navigation ends, hide the loading indicator.

To be able to react and execute some code in response to the router navigation events, subscribe to the Angular router events observable.

For the HTML and Source Code used in the demo, please refer to the text article of this video at the following link.
http://csharp-video-tutorials.blogspot.com/2018/06/angular-route-loading-indicator.html