Navigation Events in Angular | Angular Routing | Angular 13+
In this lecture you will learn about the sequence of navigation events that are triggered by the angular route when navigating from one route to another route.
The navigation event ranges from when the navigation starts to when the navigation ends with many other events in between.
To see the sequernce of events triggered by the angular route, all we have to do is to enable tracing. We can enable tracing by passing a second argument to theforRoot method, which is an object. To this object, we can specify enableTracing property and set it to true.
We can also run some logic when any one of these events happen by subscribing to router events. In this lecture you will learn:
1. What is router navigation events?
2. How to trace route navigation events?
3. Display loading indicator while navigating to different routes.
***CSS for displaying loading indicator***
.spinner {
border: 16px solid silver;
border-top: 16px solid #222
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin 700ms linear infinite;
top:50%;
left:50%;
position: absolute;
}
@keyframes spin {
0% { transform: rotate(0deg) }
100% { transform: rotate(-360deg) }
}
DOWNLOAD SECTION SOURCE CODE HERE: https://drive.google.com/file/d/16SYO...