Tim Deschryver

TIL params inheritance strategy to always have access to parent route info

@tim_deschryver

For all the years that I've been working with Angular, I always had a hard time to access the parent route info, e.g. params, and data.

You probably already know what I mean and might even have written the same code as I did.

Let's take a quick look at an example route.

To make this more concrete, the route might look like this in the application.

To give you the full picture, the Angular routes for this route are defined as follows.

And the snapshot of the activated customers route looks empty by default.

Now, to access the parent id (comanyId) from the customers component, the code that I used to write, and have seen a lot, is the following one.

What I don't like about this code is that it's very brittle. There's a big chance that the above breaks when the routes are re-arranged, or when the component is used in multiple views with another route structure or naming.

As a fix, one can make the code more robust and make the lookup dynamic, with for example, a while look that traverses the parent routes until it finds the data that it's looking for.

But, Today I Learned, that there's a better, quicker, and simpler solution to this problem.

Please welcome, paramsInheritanceStrategy, a router option that's been a part of the Angular API from the earlier versions. It is only today, 4 years later, that I encounter the paramsInheritanceStrategy option.

With its value set to always, you get access to all parent data from the activated route snapshot.

For the same route as we started with, the customers activated route's payload looks like this.

Meaning that we can pluck companyId from the snapshot.

This has the advantage that:

This goes further than just the route params, but the full route information is accessible from the child, for example, the data property.

To get this result, configure the Angular router and set the paramsInheritanceStrategy option to always.

Note that for params with the same name, that the param the closest to the activated route wins.

An example, let's take a look at the following structure.

When the customer route /customers/99/year/2022/customers/4 is the active, then we end up with the following results.

Therefore, it's important to give a unique name to the route parameters, and not to default to :id for all routes. This also makes it easier to differentiate the params of a route.

Conclusion

By setting the value of paramsInheritanceStrategy to always, we get access to all the data from parent routes. Whereas previously, with the default value emptyOnly we do not.

For the https://localhost:4200/company/7/year/2022/customers/1 route, this means that the company id and the year are added to the params snapshot of the customer route.

For the default emptyOnly, this is only the case when there isn't a component bound to the route.

Take a look at a working sandbox and notice the effect when you remove the paramsInheritanceStrategy: 'always' option.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Buy Me a Coffee at ko-fi.com PayPal logo
Support the blog Share on Twitter Discuss on Twitter Edit on GitHub