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:

import { RouterLinkActive } from '@angular/router';

Aggiungiamolo nel decoratore:

@Component({
	......
	imports: [RouterOutlet, RouterLink, RouterLinkActive],
	......
})

E ora aggiungiamo questo attributo ai nostri link:

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

.active {
	color: red;
}

Stilizza i link attivi nel tuo progetto.