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ë:
import { RouterLinkActive } from '@angular/router';
Le ta shkruajmë në dekorator:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Dhe tani le t'ia shtojmë këtë atribut lidhjeve tona:
<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:
.active {
color: red;
}
Stilizoni lidhjet aktive në projektin tuaj.
