Resaltando el link activo con CSS para indicar visualmente en que componente nos encontramos

Domina la navegación en Angular con confianza: aprende a usar la directiva /routerLinkActive/ para resaltar el link activo de tu menú y prepara el terreno para parámetros en la URL que apunten a vistas de detalle por ID. Mejora la experiencia de usuario y mantén tu interfaz coherente sin trucos manuales.

Resaltar el link activo con el router

La situación inicial: en la vista de detalle, Inicio seguía marcado como activo. El cambio clave es dejar de depender de una clase fija y permitir que el router determine qué enlace debe tener la clase /active/ según la ruta actual en tiempo real.

¿Qué problema resuelve routerLinkActive?

• Evita que un enlace incorrecto aparezca como activo tras navegar.
• Elimina la dependencia de una clase estática en el HTML.
• Mantiene el estado visual sincronizado con la ruta actual.

¿Cómo se configura en app.component.html?

Agrega la directiva /routerLinkActive/ con el valor de la clase /active/ a cada elemento del menú. El ajuste se realiza en el archivo /app.component.html/.

<nav>
  <a routerLink="/inicio" routerLinkActive="active">Inicio</a>
  <a routerLink="/detalle" routerLinkActive="active">Detalle</a>
</nav>

Pasos prácticos: - Quita la clase fija /active/ del HTML para evitar estados falsos. - Añade la directiva /routerLinkActive/ con el parámetro "active" en cada enlace del menú. - Refresca el navegador y verifica el comportamiento tras navegar.

¿Qué resultado se observa al navegar?

• En la ruta de inicio, Inicio aparece resaltado automáticamente.
• Al entrar a detalle, Detalle se resalta y Inicio ya no.
• El menú siempre muestra el enlace activo correcto según la vista.

Parámetros en la URL para vistas de detalle

El siguiente paso anunciado es enviar parámetros en la URL para mostrar el detalle de un elemento específico, por ejemplo un lugar por su ID. Así, al hacer clic en un elemento de una lista, se navegará a una ruta con su identificador y se mostrará solo su detalle.

¿Para qué sirven los parámetros en la URL?

• Identificar recursos únicos por ID en rutas legibles.
• Cargar solo la vista de detalle correspondiente.
• Preparar navegación desde listados hacia detalles específicos.

¿Tienes dudas o ejemplos que quieras compartir sobre cómo resaltar enlaces activos o pasar IDs en la URL? Cuéntalo en los comentarios y conversemos.