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
dataproperty - 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
idas route parameterheroNameas data from resolverheroPoweras 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! ?