Стилизация на активни връзки в 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;
}