Angular Router Events
March 05, 2024
1. For every navigation,
Router emits navigation events that we can fetch by subscribing Router.events property.
2. The event
NavigationStart occurs when navigation starts and the event NavigationEnd occurs when navigation ends successfully.
3. The event
GuardsCheckStart occurs when route guard check starts and the event GuardsCheckEnd occurs when route guard check ends successfully.
4. The event
ChildActivationStart occurs when route children begin to activate and the event ChildActivationEnd occurs when route children activation ends.
5. The event
ActivationStart occurs when a route is activated and the event ActivationEnd occurs when route activation ends.
6. Angular
Event is a type-alias for all router events that allow us to track the lifecycle of the router.
7. All the router events are imported from
@angular/router.
Contents
1. Router Events Order
Router events are fired in following order.1. NavigationStart : When navigation starts.
2. RouteConfigLoadStart : Before the router lazy loads a route configuration.
3. RouteConfigLoadEnd : After the router has lazy loaded a route.
4. RoutesRecognized : When the URL is parsed and the routes are recognized.
5. GuardsCheckStart : When the route guards check starts.
6. ChildActivationStart : When the route children begins to activate.
7. ActivationStart : When a route is activated.
8. GuardsCheckEnd : When the route guards phase finishes successfully.
9. ResolveStart : When the Resolve phase of routing starts.
10. ResolveEnd : When the Resolve phase of routing ends successfully.
11. ChildActivationEnd : When the route children activation ends.
12. ActivationEnd : When a route activation ends.
13. NavigationEnd : When navigation ends successfully.
14. NavigationCancel : When navigation is canceled.
15. NavigationError : When navigation fails due to an unexpected error.
16. Scroll : Represents a scrolling event.
2. Subscribe to Events
To subscribe router events, we need to useRouter.events property.
class Router {
events: Observable<Event>
------
}
events is a read-only property that consist event stream for routing events.
We can subscribe
Router.events as below.
this.router.events.subscribe(event => {
console.log(event);
});
constructor(private router: Router) { }
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
console.log("--- NavigationStart ---");
} else if (event instanceof RouteConfigLoadStart) {
console.log("--- RouteConfigLoadStart ---");
} else if (event instanceof RouteConfigLoadEnd) {
console.log("--- RouteConfigLoadEnd ---");
} else if (event instanceof RoutesRecognized) {
console.log("--- RoutesRecognized ---");
} else if (event instanceof GuardsCheckStart) {
console.log("--- GuardsCheckStart ---");
} else if (event instanceof ChildActivationStart) {
console.log("--- ChildActivationStart ---");
} else if (event instanceof ActivationStart) {
console.log("--- ActivationStart ---");
} else if (event instanceof GuardsCheckEnd) {
console.log("--- GuardsCheckEnd ---");
} else if (event instanceof ResolveStart) {
console.log("--- ResolveStart ---");
} else if (event instanceof ResolveEnd) {
console.log("--- ResolveEnd ---");
} else if (event instanceof ChildActivationEnd) {
console.log("--- ChildActivationEnd ---");
} else if (event instanceof ActivationEnd) {
console.log("--- ActivationEnd ---");
} else if (event instanceof NavigationEnd) {
console.log("--- NavigationEnd ---");
} else if (event instanceof NavigationCancel) {
console.log("--- NavigationCancel ---");
} else if (event instanceof NavigationError) {
console.log("--- NavigationError ---");
} else if (event instanceof Scroll) {
console.log("--- Scroll ---");
}
});
}
3. Filter Events
We can filter router events using RxJSfilter operator.
constructor(private router: Router) { }
ngOnInit() {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((e) => {
console.log("--- NavigationEnd ---");
console.log(this.router.url);
});
}
NavigationEnd event.
RouterEvent Class
RouterEvent is the base class for GuardsCheckEnd, GuardsCheckStart, NavigationCancel, NavigationEnd, NavigationError, NavigationSkipped, NavigationStart, ResolveEnd, ResolveStart, RoutesRecognized. We can filter RouterEvent as following.
ngOnInit() {
this.router.events.pipe(
filter(event => event instanceof RouterEvent)
).subscribe((e) => {
// Perform any task
});
}
4. Using NavigationStart and NavigationEnd
Here I will useNavigationStart and NavigationEnd events to display loading message for a navigation. On navigation start, loading message will start displaying. Once navigation ends successfully or navigation is canceled or there is navigation error, in all these cases loading message stops.
import { Component, OnInit } from '@angular/core';
import { NavigationCancel, NavigationEnd, NavigationError, NavigationStart, Router } from '@angular/router';
@Component({
template: `
<div *ngIf="isLoading">
Loading ...
</div>
------
`
})
export class PersonComponent implements OnInit {
isLoading = false;
constructor(private router: Router) { }
ngOnInit() {
this.router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this.isLoading = true;
} else if (event instanceof NavigationEnd) {
this.isLoading = false;
} else if (event instanceof NavigationCancel) {
this.isLoading = false;
} else if (event instanceof NavigationError) {
this.isLoading = false;
}
console.log(this.isLoading);
});
}
}
5. Tracing Router Events
We can trace router events for debugging purpose in our application. We need to enable tracing in our application. Once tracing is enabled, for every navigation, all events will be logged to console.1. Using enableTracing in Router Module : Use
enableTracing of ExtraOptions to enable tracing. ExtraOptions is a set of configuration options for a router module. It is passed to RouterModule.forRoot() method. enableTracing is a boolean property and when its value is true, all internal navigation events are logged to the console.
Find the code snippet.
const routes: Routes = [
------
];
const extraOptions: ExtraOptions = {
"enableTracing": true
};
@NgModule({
imports: [
RouterModule.forRoot(routes, extraOptions)
],
------
})
export class AppRoutingModule { }
withDebugTracing() to provideRouter() function. provideRouter() configures providers required for routing. withDebugTracing() function enables logging of all internal navigation events to the console.
Find the code snippet.
const routes: Routes = [];
bootstrapApplication(AppComponent,
{
providers: [
provideRouter(routes, withDebugTracing())
]
}
);
