Stilizimi i Lidhjeve Aktive në Angular

Mund të bëhet që lidhjet, URL i të cilave përputhet me shiritin e adresave, të theksohen me ndonjë stil, për shembull, me ngjyrë. Për këtë në Angular parashikohet një atribut i veçantë RouterLinkActive.

Le të shohim se si funksionon. Për fillim le ta importojmë atë:

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

Le ta shkruajmë në dekorator:

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

Dhe tani le t'ia shtojmë këtë atribut lidhjeve tona:

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

Siç e shihni, në shembullin tonë vlera e atributit është active. Ky është emri i klasës CSS, e cila do t'i jepet lidhjes aktive. Tani ne mund t'i stilizojmë ato, si të duam:

css.active {
  color: red;
}