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

Modified August 15, 2022

Tim Deschryver

timdeschryver.dev

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.

 content_paste
https://localhost:4200/parent/:parentId/child/:childId/grandchild

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

 content_paste
https://localhost:4200/company/7/year/2022/customers

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

 content_paste
RouterModule.forRoot([
    {
        path: 'company/:companyId',
        component: CompanyComponent,
        children: [
            {
                path: 'year/:year',
                component: YearComponent,
                children: [
                    path: 'customers',
                    component: CustomersComponent
                ]
            }
        ]
    },
]);

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

 content_paste
{
  "snapshot": {
    "params": {}
  }
}

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.

 content_paste
const companyId = activatedRoute.parent.parent.snapshot.params.companyId;

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.

 content_paste
{
  "snapshot": {
    "params": {
      "companyId": 7,
      "year": 2022
    }
  }
}

Meaning that we can pluck companyId from the snapshot.

 content_paste
const companyId = activatedRoute.snapshot.params.companyId;

This has the advantage that:

• it's easier to understand
• it's reusable
• changing routes doesn't have an impact

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.

 content_paste
RouterModule.forRoot([
    {
        path: 'company/:companyId',
        component: CompanyComponent,
        children: [
            {
                path: 'year/:year',
                component: YearComponent,
                children: [
                    path: 'customers',
                    component: CustomersComponent
                ]
            }
        ]
    }],
    {
        paramsInheritanceStrategy: '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.

 content_paste
RouterModule.forRoot([
    {
        path: 'company/:id',
        component: CompanyComponent,
        data: {
            title: 'Company',
            featureToggleA: true,
        },
        children: [
            {
                path: 'year/:year',
                component: YearComponent,
                children: [
                    path: 'customers/:id',
                    component: CustomersComponent,
                    data: {
                        title: 'Customer',
                        featureToggleB: true,
                    },
                ]
            }
        ]
    }],
    {
        paramsInheritanceStrategy: 'always'
    }
);

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

 content_paste
{
  "snapshot": {
    "params": {
      // from the year route
      "year": 2022,
      // from the customer route
      // the parent's route info is lost
      "id": 4
    },
    "data": {
      // from the customer route
      "title": "Customer",
      // from the company route
      "featureToggleA": true,
      // from the customer route
      "featureToggleB": false
    }
  }
}

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 link

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.

 content_paste
{
    "snapshot": {
        "params": {
            "customerId": 1
           "companyId": 7,
           "year": 2022,
        }
    }
}

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.

Feel free to update this blog post on GitHub, thanks in advance!

Support me

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

Share this post