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:

app/app.component.tsimport { RouterLinkActive } from '@angular/router';

Vamos adicioná-lo no decorador:

app/app.component.ts@Component({
  ......
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  ......
})

E agora vamos adicionar este atributo aos nossos links:

app/app.component.html<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:

css.active {
  color: red;
}