Tuesday, August 6, 2019

Angular router navigation events

In this video we will discuss the sequence of navigation events that are triggered by the angular router, when navigating from one route to another route. These navigation events range from when the navigation starts and ends to many points in between.

Text version of the CRUD CRUD Tutorial Text Articles & Dot Net and SQL Server Tutorials in Dot Net and SQL Server Tutorials in see these navigation events in action, set enableTracing option to true as shown below. Enabling tracing logs all the router navigation events to the browser console.

RouterModule.forRoot(appRoutes, { enableTracing: true })

The following list shows some of the navigation events

1. NavigationStart

2. NavigationEnd

3. RoutesRecognized

4. GuardsCheckStart

5. GuardsCheckEnd

6. NavigationCancel

7. NavigationError

8. ChildActivationStart

9. ChildActivationEnd

10. ActivationStart

11. ActivationEnd

12. ResolveStart

13. ResolveEnd

What are the use cases of these navigation events

1. Monitor routes

2. Troubleshoot when routing does not work as expected

3. Display a loading message if there is a delay when navigating from one route to another (We will discuss this in our next video)

No comments:

Post a Comment