Bunte Tastatur
Dennis, Kiya | 25.1.2024

Angular: Routed Input Bindings

Web > 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:

Content
  • What is the conventional method for input binding in Angular?
  • How has Angular 16 improved routing input bindings?
  • How to use `@Input` decorators for component data binding?
Dennis Hundertmark
Dennis (Softwareentwickler)

Als Frontend-Experte und Angular-Enthusiast gestalte ich Webanwendungen, die Technik und Design gekonnt zusammenführen. Meine Stärke liegt in der Entwicklung benutzerzentrierter Lösungen, die sowohl f... mehr anzeigen

Gitlab
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund