Aktiivisten linkkien tyylittely Angularissa

Voit tehdä niin, että linkit, joiden URL osuu osoiterivin osoitteeseen, korostuvat jollain tyylillä, esimerkiksi värillä. Tätä varten Angularissa on erityinen attribuutti RouterLinkActive.

Katsotaan kuinka se toimii. Ensin tuomme sen:

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

Kirjoitetaan dekorattoriin:

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

Ja nyt lisäämme tämän attribuutin linkkeihimme:

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

Kuten näet, esimerkissämme attribuutin arvo on active. Tämä on CSS-luokan nimi, joka annetaan aktiiviselle linkille. Nyt voimme tyylitellä ne haluamallamme tavalla:

css.active {
  color: red;
}