🧠 Astuce Angular 20 : Clarifie le Binding des Paramètres de Route dans Angular 20

Angular a fait d’énormes progrès pour simplifier la gestion des paramètres de route dans les applications. Si vous avez développé des apps Angular avant la version 16, vous avez probablement écrit du code répétitif avec ActivatedRoute et paramMap juste pour récupérer un simple id.

Mais il existe une meilleure solution, parfaitement adaptée aux pratiques modernes d’Angular 20 : withComponentInputBinding().

Cet article vous explique ce que c’est, le problème subtil qu’il introduit, et une astuce élégante pour rendre votre code plus clair — le tout dans Angular 20.

💡 Qu’est-ce que withComponentInputBinding() ?

withComponentInputBinding() est un utilitaire de configuration qui permet à Angular de lier automatiquement les paramètres de route aux propriétés @Input() de vos composants.

Cela signifie que vous n’avez plus besoin de vous abonner manuellement aux observables de route pour extraire les paramètres.

Par exemple, si votre route est /user/:id et que votre composant a un @Input() nommé id, Angular fera le lien automatiquement — à condition d’avoir activé cette option dans le routeur.

✅ Comment ça marche :

• Définissez la route :

{ path: 'user/:id', component: UserComponent }

• Déclarez un @Input() dans votre composant :

@Input() id!: string;

• Activez le binding dans votre configuration du routeur :

provideRouter(routes, withComponentInputBinding())

Et voilà ! Les paramètres de la route sont injectés directement dans votre composant — sans abonnement manuel.

😕 Le Problème : Intention Ambiguë dans le Code

Même si cette méthode est puissante, elle introduit un flou.

En utilisant @Input() pour lier des paramètres de route, l’intention devient moins claire. Par convention, @Input() indique qu’une donnée provient d’un composant parent, pas du routeur.

Ce mélange des rôles peut embrouiller la lecture du code. Les autres développeurs (ou vous-même dans quelques mois) pourraient croire que la valeur vient d’un composant parent — alors qu’elle vient de l’URL.

🧪 La Solution : Clarifier l’Intention avec un Alias

L’astuce : aliaser la fonction input() d’Angular avec un nom plus explicite — comme routeBinding().

import { input, input as routeBinding } from '@angular/core';

Vous pouvez désormais distinguer clairement la source des données :

• input() pour les données venant d’un composant parent
• routeBinding() pour les paramètres de route

Exemple :

id = routeBinding<string>();     // Vient clairement de la route
title = input<string>();         // Vient du composant parent

Ce petit changement ne modifie pas le comportement d’Angular, mais rend votre code beaucoup plus lisible et explicite.

🧱 Exemple Complet : Binding Clair des Params dans Angular 20

Voyons un exemple concret utilisant cette astuce dans un projet Angular 20.

🔹 Étape 1 : Créer le composant User

import { Component, input, input as routeBinding } from '@angular/core';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `
    <h2>User Component</h2>
    <p>ID reçu depuis la route (via routeBinding) : <strong></strong></p>
  `,
})
export class UserComponent {
  id = routeBinding<string>(); // depuis la route
  regularInput = input<string>(); // depuis le parent
}

🔹 Étape 2 : Créer le composant racine AppComponent

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  template: `
    <h1>Démo Angular 20 : Binding des Paramètres de Route</h1>
    <nav>
      <a [routerLink]="['/user', 42]">Aller à /user/42</a>
    </nav>
    <router-outlet/>
  `,
})
export class AppComponent {}

🔹 Étape 3 : Bootstrap de l’app avec le binding activé

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, Routes, withComponentInputBinding } from '@angular/router';
import { AppComponent } from './app.component';
import { UserComponent } from './user.component';

const routes: Routes = [
  {
    path: 'user/:id',
    component: UserComponent,
  },
];

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes, withComponentInputBinding())],
});

✅ Résumé

| Fonction | Description | | ----------------------------- | ------------------------------------------------------------------- | | withComponentInputBinding() | Lie automatiquement les paramètres de route aux inputs du composant | | Aliasing de input() | Clarifie la source des données dans le code | | Compatible Angular 20 | Idéal avec les composants standalone et les signaux (signals) | | Meilleure DX | Lecture, debug et maintenance facilités |

🚀 Conclusion

Bien que withComponentInputBinding() ait été introduit avant Angular 20, c’est aujourd’hui le moment idéal pour l’adopter. Avec la montée en puissance des composants standalone et des signaux, il est temps que votre logique de routage évolue aussi.

En aliasant input() pour les paramètres de route, vous rendez votre intention explicite, votre code plus propre, et vos composants plus clairs à maintenir.

💬 Et vous ?

🔸 Allez-vous utiliser cette astuce dans vos projets Angular 20 ? 🔸 Pensez-vous qu’Angular devrait introduire un décorateur natif comme @RouteParam() ?

Discutons-en ensemble ! 👇