Estilización de enlaces activos en Angular

Se puede hacer que los enlaces, cuya URL coincida con la barra de direcciones, se resalten con algún estilo, por ejemplo, con color. Para esto, Angular proporcion un atributo especial RouterLinkActive.

Veamos cómo funciona. Para empezar, importémoslo:

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

Escribámoslo en el decorador:

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

Y ahora agreguemos este atributo a nuestros enlaces:

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 puedes ver, en nuestro ejemplo el valor del atributo es active. Este es el nombre de la clase CSS que se asignará al enlace activo. Ahora podemos darles estilo, como queramos:

css.active {
  color: red;
}