Styling van actieve links in Angular

Het is mogelijk om links waarvan de URL overeenkomt met de adresbalk, te laten opvallen met een bepaalde stijl, bijvoorbeeld een kleur. Hiervoor heeft Angular een speciale attribuut RouterLinkActive.

Laten we eens kijken hoe het werkt. Om te beginnen importeren we het:

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

Laten we het in de decorator specificeren:

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

En nu voegen we dit attribuut toe aan onze links:

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

Zoals je ziet, is de waarde van het attribuut in ons voorbeeld active. Dit is de naam van de CSS-klasse die aan de actieve link wordt gegeven. Nu kunnen we ze stilen zoals we willen:

.active {
	color: red;
}

Styl de actieve links in je project.