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.

Ejemplo real: Formulario con validación

@if (form.controls.email; as emailCtrl) {
  <input [formControl]="emailCtrl" type="email" />
  
  @if (emailCtrl.hasError('required') && emailCtrl.touched) {
    <span class="error">El email es obligatorio</span>
  } @else if (emailCtrl.hasError('email')) {
    <span class="error">El formato del email no es válido</span>
  }
}

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 para que Angular sepa exactamente qué nodo del DOM mover, crear o destruir.
• Variables Implícitas: 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.

Bloque @switch

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

Comparativa de rendimiento

El nuevo Control Flow ofrece mejoras medibles:

• @for con track: Hasta un 90% más rápido que *ngFor en actualizaciones parciales de listas grandes.
• @if: Mejor tree-shaking ya que no depende de directivas importadas.
• Bundle size: Menor tamaño final al eliminar la dependencia de CommonModule.

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.