Styling af aktive links i Angular

Det er muligt at gøre, så links, hvis URL matcher adressefeltet, fremhæves med en bestemt stil, for eksempel en farve. Til dette har Angular en speciel attribut RouterLinkActive.

Lad os se, hvordan det fungerer. Til at starte med importerer vi den:

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

Lad os tilføje den i dekoratøren:

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

Og nu tilføjer vi denne attribut til vores links:

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

Som du kan se, er værdien af attributten i vores eksempel active. Dette er navnet på en CSS-klasse, som vil blive givet til det aktive link. Nu kan vi style dem, som vi ønsker:

.active {
	color: red;
}

Style de aktive links i dit projekt.