Angular'da Aktif Bağlantıların Stilize Edilmesi
URL'si tarayıcının adres çubuğuyla eşleşen bağlantıların, örneğin bir renkle
vurgulanmasını sağlayabilirsiniz. Bunun için Angular'da özel bir
nitelik RouterLinkActive bulunur.
Nasıl çalıştığına bir göz atalım. Öncelikle onu içe aktaralım:
import { RouterLinkActive } from '@angular/router';
Dekoratörde tanımlayalım:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Şimdi bu niteliği bağlantılarımıza ekleyelim:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Gördüğünüz gibi, örnekte niteliğin değeri
active. Bu, aktif bağlantıya verilecek
CSS sınıfının adıdır. Artık onları istediğimiz
gibi stilize edebiliriz:
.active {
color: red;
}
Projenizdeki aktif bağlantıları stilize edin.
