Angular & Signals (283 Qs)•Part 3: Angular Router, Navigation & SSR Universal (63 - 75)
What are router events?
During each navigation, the Router emits navigation events through the Router.events property allowing you to track the lifecycle of the route.
The sequence of router events is as below,
- NavigationStart,
- RouteConfigLoadStart,
- RouteConfigLoadEnd,
- RoutesRecognized,
- GuardsCheckStart,
- ChildActivationStart,
- ActivationStart,
- GuardsCheckEnd,
- ResolveStart,
- ResolveEnd,
- ActivationEnd
- ChildActivationEnd
- NavigationEnd,
- NavigationCancel,
- NavigationError
- Scroll
Practical Code Example
typescript
// Listening to Router Events:
import { Component, inject } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Component({ selector: 'app-nav', standalone: true, template: '' })
export class NavComponent {
private router = inject(Router);
constructor() {
this.router.events
.pipe(filter(e => e instanceof NavigationEnd))
.subscribe((e: NavigationEnd) => console.log('Navigated to:', e.urlAfterRedirects));
}
}