Router data as components inputs in Angular v16

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 parameter
• heroName as data from resolver
• heroPower 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! 🤓