Router data as components inputs in Angular v16
Router data as components inputs is a new feature coming in Angular 16. In this article, we will explore how it works, and learn how to use it.

Up until now, we have considered properties decorated with @Input
as properties bound to the DOM properties. These properties can be used to pass data from parent to child. For instance, if a child component has an input property called name
, we can use it like this:
<app-child name="John"></app-child>
Starting from Angular version 16, we can use inputs to declare properties that will bind to route parameters.
What does this mean? Let's consider the following route definition:
const routes: Routes = [
{
path: 'hero/:id',
component: ChildComponent,
},
];
When we need to obtain the ID in our component, such as when fetching a hero using its ID, we would do the following in the component:
export class ChildComponent {
constructor(route: ActivatedRoute) {
route.params.subscribe((params) => console.log(params.id));
}
}
Now we can use @Input
for that. It's as simple as that.
export class ChildComponent {
@Input() id: string;
}
That’s not all! We can access variety of route parameters, including:
- route parameters
- query parameters
- route data from
data
property - route data from resolvers
Let's quickly check the rest, starting from this route definition:
const routes: Routes = [
{
path: 'hero/:id',
component: ChildComponent,
resolve: {
heroName: () => 'Yoda',
},
data: {
heroPower: 'Force',
},
},
];
We have
id
as route parameterheroName
as data from resolverheroPower
as data from data property
In the component, we can add input properties for all of these, as well as an additional one for a query parameter, as follows:
export class ChildComponent {
@Input() id?: string;
@Input() heroName?: string;
@Input() heroPower?: string;
@Input() heroParameter?: string;
}
That's it! Everything works automatically, and input properties pick up the current route parameters without the need for injecting ActivatedRoute
into the component anymore.
Have fun and enjoy Angular 16 features! 🤓