Stylizacja aktywnych linków w Angular
Można sprawić, aby linki, których URL
pasuje do paska adresu, były wyróżnione
jakimś stylem, na przykład kolorem. W tym
celu Angular przewiduje specjalny
atrybut RouterLinkActive.
Przyjrzyjmy się, jak to działa. Na początek go zaimportujmy:
import { RouterLinkActive } from '@angular/router';
Wpiszmy w dekoratorze:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
A teraz dodajmy ten atrybut do naszych linków:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Jak widać w naszym przykładzie, wartością
atrybutu jest active. To jest nazwa
klasy CSS, która będzie nadawana aktywnemu
linkowi. Teraz możemy je stylizować
według własnego uznania:
.active {
color: red;
}
Stylizuj aktywne linki w swoim projekcie.
