Стилизация активных ссылок в Angular

Можно сделать так, чтобы ссылки, URL которых совпадает с адресной строкой, выделялись каким-то стилем, например, цветом. Для этого в Angular предусмотрен специальный атрибут RouterLinkActive.

Давайте посмотрим, как он работает. Для начала импортируем его:

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

Пропишем в декораторе:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

А теперь добавим этот атрибут к нашим ссылкам:

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

Как вы видите, в нашем примере значением атрибута является active. Это имя CSS класса, который будет даваться активной ссылке. Теперь мы можем стилизовать их, как нам угодно:

css.active {
  color: red;
}