Stylisasi Tautan Aktif di Angular
Kita dapat membuat tautan yang URL-nya
cocok dengan bilah alamat untuk ditonjolkan
dengan gaya tertentu, misalnya warna. Untuk
ini, Angular menyediakan atribut khusus
RouterLinkActive.
Mari kita lihat cara kerjanya. Pertama, impor modulnya:
import { RouterLinkActive } from '@angular/router';
Deklarasikan dalam dekorator:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Sekarang tambahkan atribut ini ke tautan kita:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Seperti yang Anda lihat, dalam contoh kita, nilainya
atribut adalah active. Ini adalah nama
kelas CSS yang akan diberikan kepada tautan aktif.
Sekarang kita dapat menata gayanya,
sesuai keinginan kita:
.active {
color: red;
}
Tata gaya tautan aktif di proyek Anda.
