Angular: Routed Input Bindings

With the introduction of Angular 16, we experience a significant improvement when it comes to feeding information from Angular routes into components. It is now possible to bind values directly to @Input decorators of components, providing a more elegant and efficient method of data transfer.

Let's first consider the conventional method:

1const routes: Route[] = [
2// further routes
3  {
4    path: 'details/:id',
5    loadComponent: () =>
6      import('./blog-details.component').then((c) => c.BlogDetails),
7    data: {
8      admin: true,
9    },
10  },
11];
12
13@Component({
14  selector: 'blog-details',
15  template: `
16  <ng-container *ngIf="vm$ | async as vm"><p> with active route {{ vm.id }} {{ vm.admin | json }} </p></ng-container>
17  `,
18  styles: [],
19  standalone: true,
20  imports: [NgIf, AsyncPipe],
21  changeDetection: ChangeDetectionStrategy.OnPush,
22})
23export class BlogDetails {
24  activatedRoute = inject(ActivatedRoute);
25
26  id$ = this.activatedRoute.params.pipe(map((params) => params['id']));
27
28  idData$ = this.activatedRoute.data;
29
30  vm$ = combineLatest([this.id$, this.idData$]).pipe(
31    map(([id, idData]) => ({ id, admin: idData.admin }))
32  );
33}

In this older method, it was necessary to inject ActivatedRoute and tediously read out the parameters and the data attribute from the route.

Now let's look at the new and improved method:

The main.ts file needs a slight adjustment to enable the new withComponentInputBinding option in the router:

1bootstrapApplication(App, {
2  providers: [provideRouter(routes, withComponentInputBinding())],
3});

Then, the route information can be directly passed to the components via @Input decorators:

1@Component({
2  selector: 'blog-details',
3  template: `<p>with component input binding: {{ id }} {{ admin | json }} </p>`,
4  styles: [],
5  standalone: true,
6  imports: [NgIf, JsonPipe],
7  changeDetection: ChangeDetectionStrategy.OnPush,
8})
9export class BlogDetails {
10  @Input() id!: string;
11
12  @Input() admin!: boolean;
13}

This method simplifies data binding and makes the code cleaner and easier to maintain. You can find a handy example of this on Stackblitz.

Further information:

• Binding Router Information to Routed Component Inputs in Angular