Cuando trabajas con Angular, dominar RouterLink y el control flow no solo es una ventaja, es prácticamente obligatorio para construir aplicaciones dinámicas y fáciles de navegar. En este artículo, vamos a desglosar desde lo básico hasta ejemplos más avanzados que te ayudarán a mejorar tu flujo de trabajo y hacer que tus interfaces sean más intuitivas. Además, integraremos conceptos como ngClass, ngStyle, comunicación entre componentes y nuevas directivas que Angular ha incorporado para simplificar la vida del desarrollador.
Introducción a Angular RouterLink y control flow
En Angular, RouterLink es la forma más limpia y directa de enlazar vistas dentro de tu aplicación SPA (Single Page Application). No hablamos de enlaces HTML tradicionales, sino de un sistema que interactúa con el enrutador de Angular para cargar componentes sin recargar la página.
Por otro lado, el control flow ha evolucionado para ser más legible, expresivo y con mejor rendimiento, gracias a nuevas directivas como @for y @if, que sustituyen patrones repetitivos.
Si todavía no has dado el paso inicial en Angular, te recomiendo leer esta guía para empezar con Angular desde cero, que sienta las bases antes de meterse en temas más avanzados.
Angular RouterLink: qué es y cómo usarlo en tus proyectos
RouterLink permite enlazar rutas declaradas en el RouterModule directamente desde tus plantillas HTML.
En lugar de usar un href que recargue la página, usamos:
<a [routerLink]="['/ruta']">Ir a la ruta</a>
Esto le indica a Angular que maneje la navegación de forma interna, optimizando tiempos de carga y ofreciendo una experiencia fluida.
En Angular moderno (standalone), no se importa con default, sino como export nombrado y se añade en imports del componente raíz junto a RouterOutlet.
app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './components/shared/navbar/navbar.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, NavbarComponent],
templateUrl: './app.component.html',
})
export class AppComponent {}
app.component.html
<app-navbar></app-navbar>
<router-outlet></router-outlet>
navbar.component.ts (standalone)
import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
@Component({
selector: 'app-navbar',
standalone: true,
imports: [RouterModule], // Para usar [routerLink] y routerLinkActive
templateUrl: './navbar.component.html',
})
export class NavbarComponent {}
Con esta estructura, <router-outlet> va debajo del navbar para que el contenido cambie según la ruta mientras el menú permanece fijo, garantizando una experiencia consistente.
Si tu proyecto usa NgModule, declara NavbarComponent en AppModule, importa RouterModule.forRoot(routes) y coloca el mismo HTML anterior en la plantilla principal.
Usar RouterLink Active dentro del control flow de Angular
Con RouterLinkActive, Angular añade una clase CSS a un enlace cuando la ruta actual coincide. Esto es perfecto para resaltar visualmente el enlace activo:
<a [routerLink]="['/inicio']" routerLinkActive="activo">Inicio</a>
Puedes incluso añadir múltiples clases o utilizar expresiones booleanas para activar estilos condicionalmente. Esto ayuda a orientar al usuario en todo momento.
Control flow en Angular: ejemplos prácticos y buenas prácticas
Angular ha introducido un nuevo sistema de control flow que mejora la legibilidad del código y reduce el uso de directivas antiguas. En lugar de *ngFor o *ngIf, ahora puedes usar @for y @if directamente en la plantilla.
Ejemplo de control flow con signal<Movie[]>
Supongamos que tenemos un listado de películas que queremos mostrar en la interfaz. Podemos declarar un signal en nuestro componente:
import { signal } from '@angular/core';
movies = signal<Movie[]>([
{ titulo: 'Inception', año: 2010 },
{ titulo: 'Interstellar', año: 2014 }
]);
Y en la plantilla:
@for (pelicula of movies(); track pelicula.titulo) {
<div>{{ pelicula.titulo }} ({{ pelicula.año }})</div>
}
Este patrón permite renderizar listas de forma más predecible, con menos código repetitivo y mejor rendimiento.
Para profundizar en cómo usar signals, te recomiendo el artículo Componente con signals en Angular: ejemplos prácticos explicados.
Directivas estructurales @for y @if en el control flow de Angular
Las nuevas directivas son más intuitivas y evitan errores comunes. Por ejemplo:
@if (usuario) {
<p>Bienvenido, {{ usuario.nombre }}</p>
} @else {
<p>Por favor, inicia sesión</p>
}
Esto elimina la sintaxis complicada de *ngIf con else y hace que el código sea más limpio y fácil de mantener.
ngClass, ngStyle y alternativas para el control de estilos en Angular
En Angular, ngClass y ngStyle son herramientas clave para aplicar estilos condicionalmente.
Ejemplo con ngClass:
<div [ngClass]="{ 'activo': isActive, 'inactivo': !isActive }">
Estado del elemento
</div>
Ejemplo con ngStyle:
<div [ngStyle]="{ 'color': isActive ? 'green' : 'red' }">
Texto con estilo dinámico
</div>
Si buscas mayor mantenibilidad, una alternativa es manejar clases y estilos desde el componente TypeScript, asignando valores a propiedades y enlazándolos en el HTML.
Comunicación entre componentes usando Angular RouterLink y control flow
La comunicación entre componentes es esencial en aplicaciones Angular escalables. Algunas estrategias comunes incluyen:
- @Input() y @Output(): Comunicación directa entre padre e hijo.
- Servicios con inyección de dependencias: Ideal para compartir datos entre componentes no relacionados.
- EventBus o RxJS Subjects: Para eventos globales o más complejos.
En proyectos reales, se suele combinar varias de estas técnicas.
Puedes ver un ejemplo práctico en CRUD con Angular y TypeScript: primer proyecto paso a paso.
Conclusiones sobre Angular RouterLink y control flow en proyectos reales
Dominar Angular RouterLink y control flow no solo mejora la experiencia del usuario, sino que también permite trabajar más rápido y con menos errores.
Las nuevas directivas @for y @if simplifican el desarrollo, mientras que ngClass y ngStyle ofrecen control total sobre el aspecto visual.
Si combinas esto con buenas prácticas de comunicación entre componentes, estarás preparado para construir aplicaciones sólidas y fáciles de mantener.
Para ampliar tus conocimientos, te recomiendo la documentación oficial de Angular.
