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:
import { RouterLinkActive } from '@angular/router';
Escribámoslo en el decorador:
@Component({
......
imports: [RouterOutlet, RouterLink, RouterLinkActive],
......
})
Y ahora agreguemos este atributo a nuestros enlaces:
<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:
.active {
color: red;
}
Estiliza los enlaces activos en tu proyecto.
