Štýlovanie aktívnych odkazov v Angular

Môžeme spraviť tak, aby odkazy, ktorých URL sa zhoduje s adresným riadkom, boli zvýraznené nejakým štýlom, napríklad farbou. Na to je v Angular pripravený špeciálny atribút RouterLinkActive.

Pozrime sa, ako funguje. Na začiatok ho importujeme:

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

Zapíšme v dekorátori:

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

A teraz pridajme tento atribút k našim odkazom:

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

Ako vidíte, v našom príklade je hodnotou atribútu active. To je názov CSS triedy, ktorá bude pridelená aktívnemu odkazu. Teraz ich môžeme štýlovať, ako chceme:

css.active {
  color: red;
}