How To Get Route Path Parameters In Non-Routed Angular Components 🦀

Now go, get those params like there is no tomorrow! (Original 📷 by Andras Kovacs)

In this article we’re going to explore…

• what are route path parameters
• how we can access route path parameters in a standard way
• what are the non-routed components
• why it is hard to access route path params in the non -routed components
• how to access them if we really need to
• other ways around the problem
• ⚡StackBlitz working example of the described concepts…

Let’s go!

Angular routing is a very useful and powerful feature which usually “just works” as expected! However, there are some edge cases which deserves special attention…

Imagine a following situation. We have an Angular application with some route and this route defines a path parameter using :id in its route definition. The whole route path could look like the following /admin/user/:id.

Angular route definition with :id path param example

We can usually access this information in both sync and reactive ways in that particular component to which we navigated by injecting ActivatedRoute and calling this.id$ = this.route.paramMap.pipe(paramMap => paramMap.get('id')) or we can go with sync version and call this.id = this.route.snapshot.paramMap.get('id') which is even simpler, right?

Example of UserComponent retrieving :id path param from the ActivatedRoute in both reactive and sync ways

The choice between the Observable and sync snapshot retrieval of the path param depends on particular use case. We might need Observable if users can change url while application keeps displaying same component. In that case component has to keep reacting to the changes of the path parameter. This could for example mean that the component re-fetches data when the id in the url changes…

The Question

What if we wanted to know the value of the :id path parameter in a component which we…