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.

Text version of the video

Slides

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.

[pecasuy]

Thank you for sharing your time and knowledge, the English language is not my mother tongue and I have some difficulties to understand it, but you are so clear in your videos as in your code that I only need to follow your code, clean, simple and efficient, my respects and Thank you

[sstilsons]

Excellent video! I loved how Venkat summarized the whole video again at the end. :-)

[tender.branson]

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.

[studentfeedback]

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.

[sfriend-oyzw]

Thanks very much for the great work.May God bless you.

[sairk]

Venkat Garu.. As usual its Awesome andi ..Thnx and By the way what would be the Next tutorial from you ..is 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..

[WandaCea]

@kudvenkat Which version of Angular is this using? Thnx in advance

[cbn]

In my case NavigationEnd finishes before child component is ready for view. Any tips?

[dhananjay]

waiting for watch mode in angular and how to do the testing in details.... thanks sir

[diegoperrone]

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

[ravikumargrandhi]

when i refresh the screen the spinner is visible. Whereas when i navigate from create page to list pages the spinner is not visible.

[rajeshandia]

hi sir, Plz uplode autocomplet, animation video how to create angular 5

[toalopez]

Hello Venkat, can you update your videos of AngularJS to AngularJS 4 or AngularJS 5?

[MrEvgeny]

Do the spinner block the ui or I can click everywhere while the data is loading?

[rajeshandia]

hi sir how to create pagination in angular 5

[snopbear]

Waiting for Http Crud as soon as possible