Angular route parameter input binding on child routes

In my Angular 18 app, I have the following route configuration:

const routes: Routes = [
...,
{
path: 'test/:year/:month',
component: ParentComponent,
children: [
{
path: 'child',
component: ChildComponent
}
]
},
...
]


My RouterModule is also configured to bind the route params to the relevant component inputs:

RouterModule.forRoot(routes, { bindToComponentInputs: true })


I have successfully got this working in my ParentComponent, where I am able to get the two route parameters with the following syntax:

year = input<number>();
month = input<number>();


However, if I try to do the same thing in my ChildComponent (which is rendered within ParentComponent via a router-outlet), I am not able to get values for these two route parameters.

Is there a way to bind these route parameters to the child component's inputs?

Continue reading...