Aktív linkek stílusának beállítása Angularban

Megtehetjük, hogy a linkek, amelyek URL-je megegyezik a címsorban lévővel, valamilyen stílussal kiemelődjenek, például színnel. Ehhez az Angular rendelkezik egy speciális attribútummal RouterLinkActive.

Nézzük meg, hogyan működik. Először importáljuk:

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

Írjuk be a dekorátorba:

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

Most adjuk hozzá ezt az attribútumot a linkjeinkhez:

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

Amint látod, a példánkban az attribútum értéke active. Ez egy CSS osztály neve, amelyet az aktív link kap meg. Most már tetszés szerint stílusozhatjuk őket:

css.active {
  color: red;
}