Stylizzazione dei link attivi in Angular

È possibile fare in modo che i link, il cui URL corrisponde all'indirizzo nella barra degli indirizzi, vengano evidenziati con uno stile specifico, ad esempio con un colore. A questo scopo, Angular fornisce un attributo speciale RouterLinkActive.

Vediamo come funziona. Per prima cosa importiamolo:

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

Aggiungiamolo nel decoratore:

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

E ora aggiungiamo questo attributo ai nostri link:

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

Come puoi vedere, nel nostro esempio il valore dell'attributo è active. Questo è il nome della classe CSS che verrà applicata al link attivo. Ora possiamo stilizzarli come preferiamo:

css.active {
  color: red;
}