Стилизација активних линкова у Angular-у

Може се урадити тако да се линкови чији URL одговара адресној траци истакну неким стилом, на пример, бојом. За ово Angular предвиђа посебан атрибут RouterLinkActive.

Хајде да погледамо како он ради. За почетак, увезимо га:

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

Додајмо у декоратору:

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

А сада додајмо овај атрибут на наше линкове:

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

Као што видите, у нашем примеру вредност атрибута је active. Ово је име CSS класе која ће бити додељена активном линку. Сада можемо да их стилизујемо како год желимо:

.active {
	color: red;
}

Стилизујте активне линкове у вашем пројекту.