Стилизация активных ссылок в 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;
}

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