Angular: Refetch data on same URL navigation

Different approaches with their pros and cons

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

Real-time applications usually use WebSockets or some server push technology. In case the backend doesn’t support a push technology we often use some polling mechanism to get the latest data.

However, there are use cases where we want to give control to the user and let him decide when the data should be refreshed. For example by clicking on a refresh button or a route navigation item while that particular route is already displayed.

By default, the router doesn’t emit router events when we try to navigate to the same URL that is already activated. Which generally is a good thing.

But how can we refetch data on route refresh? 🤔

There are different strategies to solve this problem. Each of them has some advantages and some downsides. Let’s have a look at them.

1. Emit route events on navigation to currently active route

The first approach is to tell the Angular router to emit the route events on refresh and then handle them…