Stylisation des liens actifs dans Angular

Il est possible de faire en sorte que les liens dont l'URL correspond à celle de la barre d'adresse se distinguent par un style, par exemple une couleur. Pour cela, Angular fournit un attribut spécial RouterLinkActive.

Voyons comment il fonctionne. Pour commencer, importons-le :

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

Déclarons-le dans le décorateur :

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

Maintenant, ajoutons cet attribut à nos liens :

app/app.component.html<nav>
  <a
    routerLink="/aaaa-component"
    routerLinkActive="active"
  >
    Aaaa Component
  </a>
  <a
    routerLink="/bbbb-component"
    routerLinkActive="active"
  >
    Bbbb Component
  </a>
</nav>

Comme vous pouvez le voir, dans notre exemple, la valeur de l'attribut est active. C'est le nom d'une classe CSS qui sera appliquée au lien actif. Maintenant, nous pouvons les styliser comme bon nous semble :

css.active {
  color: red;
}