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 didn’t route to?

The good example of such a component could be the AppComponent or LayoutComponent which usually represent root layout of the application and contain the first <router-outlet> tag which then displays other routed components…

This means that the AppComponent itself is displayed always and exists completely outside of the routing mechanism of the Angular application. Let’s call it (and other such components) the non-routed components.

As it turns out, getting route path parameter in a non-routed component is not easy at all!

Naive approach

First, we can try to do exactly the same as before and inject the ActivatedRoute into the AppComponent . The route will actually be injected and we can even access some pretty useful things like queryParams and fragment but unfortunately, the paramMap will be totally empty even though our url contains path parameter…

How is that possible, could it be just an issue with the timing or something similar?

After trying to make it work using various approaches like using timeout to try to access values of the paramMap later it became clear that this just doesn’t work!

As it turned out, all this trouble could have been prevented by simply looking into official Angular documentation as a first step of the solution finding process… Maybe I should make such posters and hang them on the wall😂