Get Path Params from ActivatedRoute

In Angular, when navigating through specific pages, you usually take the path parameter to do a get on the REST Resource. However, sometimes you might need the parent path param as well. It is good to know these are just as easy to access.

TL;DR
this.activatedRoute.params.pipe();

To illustrate, I created a small workspace with both a parent and a child component. The app routing looks as follows:

path: 'parent/:parentno', children: [
{ path: 'child/:childno', component: ChildComponent, },
]

In the child component, I have an observable. This observable looks at the activatedRoute. As you can see in the activatedRoute, you can access the path param from the child as well as the parent component.
(The activatedRoute is imported from @angular/router.)


Meaning, if someone would change the url and go to another page, the observable values would change and thus the data on the page.

To illustrate; a small html snippet that represents the child component.

Going to the url would display both the numbers corresponding to the url.

Author: Richard

Owner of Olrichs Consultancy B.V.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: