{"community_link":"https://github.com/indepth-dev/community/discussions/301"}

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.

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! đŸ¤“