Estilizando links ativos no Angular
É possível fazer com que links, cujo URL
corresponde ao da barra de endereços, sejam destacados
com algum estilo, por exemplo, cor. Para
isso, o Angular fornece um atributo especial
RouterLinkActive.
Vamos ver como ele funciona. Para isso, primeiro vamos importá-lo:
import { RouterLinkActive } from '@angular/router';
Vamos adicioná-lo no decorador:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
E agora vamos adicionar este atributo aos nossos links:
<nav>
<a
routerLink="/aaaa-component"
routerLinkActive="active"
>
Aaaa Component
</a>
<a
routerLink="/bbbb-component"
routerLinkActive="active"
>
Bbbb Component
</a>
</nav>
Como você pode ver, em nosso exemplo o valor
do atributo é active. Este é o nome
da classe CSS que será aplicada ao link ativo.
Agora podemos estilizá-los
como quisermos:
.active {
color: red;
}
Estilize os links ativos no seu projeto.
