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…