Angular-da aktiv linklarin stilizasiyasi
URL-i ünvan sətri ilə üst-üstə düşən linklərin, məsələn, rəng kimi bir stil ilə vurğulanmasını təmin etmək olar. Bunun üçün Angular-da xüsusi RouterLinkActive atributu nəzərdə tutulub.
Gəlin onun necə işlədiyinə baxaq. Əvvəlcə onu import edək:
import { RouterLinkActive } from '@angular/router';
Dekorator-da yazaq:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
İndi isə bu atributu linklərimizə əlavə edək:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Gördüyünüz kimi, nümunəmizdə atributun qiyməti active-dir. Bu, aktiv linkə veriləcək CSS sinfinin adıdır. İndi biz onları istədiyimiz kimi stilizə edə bilərik:
.active {
color: red;
}
Layihənizdəki aktiv linkləri stilizə edin.
