Dominando el nuevo Control Flow de Angular: Adiós *ngIf y *ngFor

Angular ha evolucionado significativamente su motor de plantillas. Las directivas estructurales clásicas como *ngIf y *ngFor han servido bien durante años, pero dependían de librerías externas (CommonModule) y tenían limitaciones de rendimiento y tipado.

El nuevo Control Flow está integrado directamente en el compilador.

Bloque @if: Condicionales más limpios

La nueva sintaxis es mucho más intuitiva y se asemeja a JavaScript estándar. Ya no necesitamos contenedores ng-container solo para la lógica.

@if (isLoggedIn) {
  <user-profile [user]="user" />
} @else if (isLoading) {
  <loading-spinner />
} @else {
  <login-button />
}

Ventajas sobre *ngIf

1. Sintaxis más limpia: No más importaciones de CommonModule.
2. Mejor inferencia de tipos: TypeScript entiende mejor el contexto dentro de los bloques.
3. Sin sobrecarga: No crea elementos DOM intermedios innecesarios.

Bloque @for: Iteraciones optimizadas

El cambio más drástico de rendimiento viene con el bucle @for. Ahora es obligatorio el uso de track para garantizar la eficiencia en el renderizado.

<ul>
  @for (item of items; track item.id; let i = $index, e = $even) {
    <li [class.gray]="e">
      {{ i }} - {{ item.name }}
    </li>
  } @empty {
    <li>No hay elementos en la lista</li>
  }
</ul>

Características Clave

• Track: Define una clave única (como un ID) para que Angular sepa exactamente qué nodo del DOM mover, crear o destruir.
• Variables Implicitas: Acceso fácil a $index, $first, $last, $even y $odd.
• Bloque @empty: Una solución elegante para mostrar contenido cuando el array está vacío, eliminando la necesidad de un *ngIf externo.

Bloque @switch

El ngSwitch siempre fue un poco verboso. La nueva sintaxis lo simplifica enormemente:

@switch (userRole) {
  @case ('admin') {
    <admin-dashboard />
  }
  @case ('editor') {
    <editor-tools />
  }
  @default {
    <user-view />
  }
}

Migración

Angular ofrece una herramienta automática para migrar tu proyecto:

ng generate @angular/core:control-flow

Esto escaneará tus plantillas y convertirá las directivas antiguas a la nueva sintaxis automáticamente.