Capturing All Angular NavigationEnd Events

Image by Free-Photos from Pixabay

Scenario

We want to centrally track all angular NavigationEnd events for analytical purposes and document Title and Meta tag update purposes.

Approach

Inside app.component.ts perform the event tracking in the constructor like this:

constructor(private router:Router) {
    const events =
       router.events.
    pipe( filter(event=>event instanceof NavigationEnd));
    events.subscribe((e:NavigationEnd)=>{
        console.log(e.urlAfterRedirects)
    })
}

Note that the AppComponent gets created only once during the applications life time, thus we do not need to worry about unsubscribing from the router Observable .

Demo