Angular Basics
Access Parent Route Parameters in Angular
When we use child routes (also called nested routes), we often need to access a parent route's parameter, such as an ID used to make an API call. In this lesson, we'll learn how to subscribe to the parent route's paramMap in order to get that ID and use it in our child route component.
Instructor: [0:00] We've got these two child routes here, one for info and one for items. In order for us to go get the data required for each of these child routes, we need this ID, which is the parent ID of the system which corresponds to this up here in the URL bar.
[0:17] How do we pass that parent ID parameter into the child route? Unfortunately, we can't just go over to the router outlet and do something like this, where we type ID equals and pass in the parent ID. That's just not how it works.
[0:32] We could, of course, also go over to the app module. We could add in an additional parameter and do something like this, where we have another route parameter for the child route, but that would be redundant. What would be the point of using that ID twice?
[0:47] Instead, we can actually access the parent route parameter from inside of those child route components. If we go over to the system info component, in our ngOnInit, we're going to access our route and subscribe to the route params, but we'll do it with the parent this time instead.
[1:06] I could say, "this.route.parent.paramMap" and then do .pipe. We'll use switchMap and access our params, which is of type ParamMap. Then we'll set our ID. This.ID is equal to params.getId, because we're accessing the params from the parent.
[1:28] We've got a type error here because we're expecting a number and we're getting back a string. I'm going to go ahead and coerce this to be a number using the plus operator. Then I'm just going to return this.systemService.getSystemInfo and pass in this.Id. We're going to intercept the parent route params, go grab the ID off of it, and then use that ID to call the getSystemInfo method.
[1:56] Now I can just subscribe to that observable. I'll get back the data from that getSystemInfo call. That way, I can just set this.info equal to the data. Go ahead and save and format. Now if I click on info here, you can see that I'm getting back the data for the combustion system. I'm getting back that information.
[2:17] If I look at the route in the URL bar, I don't have any extra route parameters. I'm only accessing the one parent route parameter in this component. We can do the same thing for our items component in our items child route.
[2:31] I can actually just copy this whole thing. Let's go over to system items. We'll go into our ngOnInit. We'll paste this in. We just need to change getSystemInfo to getSystemItems. We need to change this.info to this.items and hit save.
[2:50] Now if I click over on our items child route, you can see that we're getting the right items for the combustion system. Again, my URL doesn't have any extra parameters in it. It's just system/one/items. That's how we can access parent route parameters inside of child routes and components.