Stilizovanje aktivnih linkova u Angularu

Moguće je postići da se linkovi čiji se URL podudara sa adresnom trakom istaknu nekim stilom, na primer, bojom. Za ovo Angular ima poseban atribut RouterLinkActive.

Hajde da pogledamo kako on radi. Za početak, importujmo ga:

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

Dodajmo u dekorator:

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

A sada dodajmo ovaj atribut našim linkovima:

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

Kao što vidite, u našem primeru vrednost atributa je active. Ovo je ime CSS klase koja će biti dodeljena aktivnom linku. Sada možemo da ih stilizujemo po sopstvenom izboru:

css.active {
  color: red;
}