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

Contenido del curso

Inicio del curso

1
Angular 4: configuración a despliegue profesional
02:13 min

Introducción a Angular 4

Setup del Ambiente de Trabajo

Conceptos Básicos

Directivas

Angular UI

Ruteo

Servicios

Conexión Remota (Http y Sockets)

Pipes

Animaciones en Angular

Testing en Angular

Autenticación y Protección de Rutas

RxJS

Publicando nuestro proyecto

72
Publicando en Firebase Hosting
07:39 min

Fin del curso

Sesiones en vivo

Contenido Bonus

80
Actualización de angular, versión 6.0
04:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:001:53

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

Curso de Angular 4

Clase 27 de 80

Clase 27 / 80

Recursos

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.

Juan Sebastian Avila

Hace 8 años

Hola.
Tengo un problema resaltando el item activo del navbar. Al estar en Inicio se resalta correctamente, pero al cambiar a Lugares o Detalle. Se resalta el item que corresponde y el de Inicio tambien. Es decir, que el item Inicio siempre se resalta

app.component.html

<ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="">Inicio<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/lugares">Lugares</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/detalle">Detalle</a>
      </li>
    </ul>

app.module.ts

const appRoutes: Routes = [
  {path:'', component: AppComponent},
  {path:'lugares', component: LugaresComponent},
  {path:'detalle', component: DetalleComponent}
];

Les agradezco por la ayuda.

Natalia Sosa

Hace 8 años

creo que se resalta porque tanto “/lugares” como “/detalle” tienen parte de la ruta de inicio, prueba cambiando la ruta de inicio a “/inicio”…

Juan Sebastian Avila

Hace 8 años

Con el cambio que sugieres se soluciona el problema. Pero me queda la siguiente duda:
¿No se puede utilizar la raiz para visualizar ningún componente? Siempre tendríamos el problema del routerLinkActive al utilizar la raiz.

Comentarios (15)15 comentarios

José Ignacio Miranda

Hace 9 años

Gleycer Parra

Usuario anónimo

User

Carlos Andrés Charris S

Francisco Manuel Velásquez Escobar

Milciades Vargas Liz

Jordano Uribe Leon

Víctor Julio Molano Bolívar

Juan Esteban Deossa Pertuz

Hace 7 años

Carlos Uriel de Jesus Sánchez González

moises mannarino

Noé Muñoz

Cristian Palta

Roger Abarca

Victor Juvenal Alejandro Varas Arquer

Mauricio Andres Vallejo Quesada

Juan Amo

Inicio del curso

Angular 4: configuración a despliegue profesional

Introducción a Angular 4

Versionamiento en Angular

Qué es Angular 4 y el salto de versiones

Typescript: qué es

Cómo monetizar una app directorio comercial

Setup del Ambiente de Trabajo

Herramientas de trabajo y Angular CLI

Generación y estructura de Angular 4

RETO: Haz un cambio simple en el proyecto.

Conceptos Básicos

Para qué nos sirven los Módulos y Componentes

Tipos de Data Binding y String Interpolation

Property Binding

Event Binding

ngModel y two way binding en Angular

Directivas en Angular 4 y ngFor

Cómo usar ngIf en Angular 4.0

Instalando librerías con NPM (Google Maps)

Directivas

ngStyle y ngClass en Angular: estilos condicionales

Directiva ngSwitch

Cómo crear directivas de atributo en Angular

Host Listeners

HostBinding en Angular: controla estilos desde directivas

Angular UI

Angular Material y Bootstrap

Configurando e implementando Bootstrap en nuestro proyecto

Ruteo

Qué hace el router en Angular 4

Implementación de Rutas en el Proyecto

Href vs router link: navegación angular

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

Parámetros de ruta con routerLink en Angular

Parámetros tipo Query

Creando una vista de detalle para el proyecto

Página de contacto Angular desde cero

Servicios

Servicios en Angular para compartir datos

Creando nuestro propio servicio

Configurando Firebase en nuestro proyecto

Guardando Records en Firebase

Obteniendo records desde Firebase

Obteniendo coordenadas usando Geocoding

Reto: Crear una vista para editar records

Mostrando marcadores en el Mapa de Google

Conexión Remota (Http y Sockets)

Funcionamiento de los llamados Http y Sockets

Qué es una arquitectura cliente - servidor

Enviando llamados tipo POST

Enviando llamados tipo GET

Formateando respuestas del servidor con el operador map()

Manejando errores HTTP

Pipes

Utilidad de los Pipes en Angular 4

Usando los pipes por defecto de Angular

Parámetros en pipes

Creando nuestro propio pipe

Animaciones en Angular

Configurando animaciones en nuestro proyecto

Transiciones

Callbacks

Solución al Reto: Añadiendo animaciones a nuestra aplicación

Testing en Angular

Introducción a unit tests

Configuración de testing por default

Corriendo los tests

Creando unit tests para componentes

Integración de Unit Test con Servicios

Autenticación y Protección de Rutas

Cómo funcionan los JSON Web Tokens

Preparación de vistas para login y registro

Registrando usuarios

Loggeando usuarios

Guardias canActivate en Angular: Proteger rutas con autenticación

Cómo integrar Facebook login con Firebase

Logout en Angular con Firebase

RxJS

Cómo funciona RxJS con metáfora de oficina