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

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Getting started with Next.js and GraphCMS

Build PWA (Progressive Web App) with Next JS under 1 minute

Creating Dynamic Discord Bots with JavaScript ES6 and Realm

React Native Two Part Progress Circle

5 Questions with Max Li, JavaScript Developer

All About the Hackos

Build and publish a v-drag directive to npm

Nuxt: Adding Babel Plugins

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Quick styling, Bootstrap 5 final and Angular 13

Angular Material Table (Learn it in 21 Steps)

How to use Toast Messages (ng-angular-popup) in Angular Project

How to create an Angular sign up form using JSON server.