Stilizarea linkurilor active în Angular
Se poate face ca linkurile, al căror URL
se potrivește cu bara de adrese, să fie evidențiate
cu un stil anume, de exemplu, cu culoare. Pentru
aceasta, Angular are prevăzut un atribut special
RouterLinkActive.
Să vedem cum funcționează. Pentru început, îl importăm:
import { RouterLinkActive } from '@angular/router';
Să-l scriem în decorator:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Și acum să adăugăm acest atribut la linkurile noastre:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
După cum vedeți, în exemplul nostru valoarea
atributului este active. Acesta este numele
clasei CSS care va fi atribuită linkului activ.
Acum le putem stiliza,
după cum dorim:
.active {
color: red;
}
Stilizați linkurile active în proiectul dvs.
