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:
import { RouterLinkActive } from '@angular/router';
Dodajmo u dekorator:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
A sada dodajmo ovaj atribut našim linkovima:
<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:
.active {
color: red;
}
Stilizujte aktivne linkove u svom projektu.
