💉 Shot #4: How to listen to Angular Router events

Introduction

There is a bunch of cases when you need to listen to Router events in Angular applications, for example, to show navigation loaders or show user navigation errors.

Step 1: Inject Router

Firstly, we have to inject Router in the component which will listen for events.

Step 2: Subscribe on events

Then, we subscribe to Router events.

Step 3: Handle type of event

Router events stream fires all router events. That’s why we have to use instanceof to filter only required events for instance NavigationStart.

Shot

Here is the final shot:

Useful Links

1. Routing and Navigation