24 – Router Link & Router Link Active – Curso aprende Angular desde cero

En el vigésimo cuarto capítulo de nuestro curso de Angular desde cero, vamos a hablar sobre Router Link y Router Link Active. Estos son dos elementos fundamentales en la creación de enlaces y rutas en una aplicación Angular.

El Router Link es una directiva que se utiliza para crear enlaces entre diferentes vistas de la aplicación. Por otro lado, el Router Link Active se utiliza para aplicar estilos CSS a los enlaces activos, es decir, aquellos que corresponden a la vista actual.

Para utilizar Router Link, simplemente debemos agregar la directiva al elemento HTML que queremos convertir en un enlace. Por ejemplo:

<a routerLink="/home">Home</a>

En este caso, al hacer clic en el enlace, la aplicación se dirigirá a la vista correspondiente a la ruta “/home”. Por otro lado, para utilizar Router Link Active, debemos agregar la directiva al elemento HTML que queremos estilizar en caso de que su ruta esté activa. Por ejemplo:

<a routerLink="/home" routerLinkActive="active">Home</a>

En este caso, al navegar a la ruta “/home”, el enlace se le aplicará la clase CSS “active”, permitiéndonos estilizarlo de manera diferenciada.

Estos elementos son fundamentales para la construcción de la navegación en una aplicación Angular, ya que nos permiten crear enlaces de forma sencilla y aplicar estilos a los enlaces activos. A lo largo del curso, veremos cómo utilizar estas y otras directivas para construir una interfaz de usuario dinámica y atractiva.

Esperamos que este capítulo te haya sido de utilidad y que sigas disfrutando de nuestro curso aprendiendo Angular desde cero. ¡Hasta la próxima lección!