🧭 Angular : simplifie ta navigation avec routerLinkActive

Dans beaucoup de projets Angular, les liens de navigation sont écrits “en dur” dans le template HTML. Résultat : le code devient vite verbeux, peu maintenable, et les classes d’activation (routerLinkActive) sont dupliquées à chaque ligne.

Et si on écrivait notre barre de navigation de façon générique, claire et réutilisable ?

🎯 Objectif

• Utiliser routerLinkActive de manière générique
• Réduire le HTML au strict minimum
• Comprendre pourquoi { exact: true } est souvent indispensable

🚧 Avant : un HTML verbeux

<nav>
    <a routerLink="/home" routerLinkActive="active">Accueil</a>
    <a routerLink="/blog" routerLinkActive="active">Blog</a>
    <a routerLink="/contact" routerLinkActive="active">Contact</a>
</nav>

🧱 Problèmes :

• Répétition du HTML
• Pas de logique centralisée
• Difficile à maintenir si les routes changent

✅ Après : une approche générique

1. 🧠 Centralise ta config dans le TypeScript

export interface NavLink {
  label: string;
  path: string;
  exact?: boolean;
}

export const NAV_LINKS: NavLink[] = [
  { label: 'Accueil', path: '/home', exact: true },
  { label: 'Blog', path: '/blog' },
  { label: 'Contact', path: '/contact', exact: true },
];

💡 exact: true signifie qu’on veut que le lien soit actif uniquement si la route correspond exactement (utile pour /home par exemple, pour éviter d’être actif aussi sur /home/subpage).

2. 🧩 Et dans le template, ça se concrétise comment ?

<nav>
    @for (link of NAV_LINKS) {
    <a
            [routerLink]="link.path"
            routerLinkActive="active"
            [routerLinkActiveOptions]="{ exact: link.exact ?? false }"
    >
        {{ link.label }}
    </a>
    }
</nav>

➡️ Résultat :

• Une seule boucle
• Pas de répétition
• Des routes dynamiques plus faciles à modifier ou tester

🔍 Pourquoi { exact: true } est crucial

Imaginons cette config :

const route: Route = { label: 'Accueil', path: '/home', exact: true };

Et l’utilisateur navigue vers /home/subpage.

Sans { exact: true }, le lien "Accueil" sera actif aussi sur /home/subpage, car Angular utilise un match par préfixe par défaut.

Avec { exact: true }, le lien est actif uniquement sur /home.

Envie de nous rejoindre ?

👉🏼 C'est par ici : EasyAngularKit