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.

Text version of the video


All GridView Text Articles

All GridView Slides

Complete GridView Tutorial in arabic

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

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.



  1. i got this problem when routes call others rutes in component —>ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: false'. Current value: 'ngIf: true'. . Any idea?

  2. Thanks for the video! Just few points to mention:

    1. I think it's better to bind loading spinner to AJAX requests, not router events. In real world applications it makes more sense.

    2. Spinner isn't centered. To center it you should reduce its top position by half of its height, and left position by half of its width.

  3. Venkat Garu.. As usual its Awesome andi ..Thnx and By the way what would be the Next tutorial from you it Cloud Computing Azure or Some other, Any ways will wait and just Follow you ..ill pray to God for your Good health and thanks a lot for the service you are doing for Dotnet Community..God Bless You..

  4. So much grateful that you are active even late night to upload videos for us. Please start a new course on .NET Core, ASP.NET Core and Azure also. Eagerly waiting since many days. Already so many videos have been created for Angular course. Humble request for new course.


Please enter your comment!
Please enter your name here