¿ESTÁS USANDO CÓDIGO OBSOLETO? LA NUEVA FORMA DE ESCRIBIR ANGULAR: CONTROL FLOW BLOCKS

Si te dedicas al desarrollo con Angular, es muy probable que hayas utilizado la directiva *ngIf en innumerables ocasiones para gestionar la visibilidad de tus componentes. Sin embargo, actualmente este framework está experimentando una transformación importante hacia una estructura más eficiente y moderna. Aquí te presentamos todo lo necesario para comprender este cambio y cómo puedes preparar tus aplicaciones para lo que viene.

[INGENIERÍA DE SOFTWARE]  ¿ESTÁS USANDO CÓDIGO OBSOLETO? LA NUEVA FORMA DE ESCRIBIR ANGULAR: CONTROL FLOW BLOCKS

1. La evolución del flujo de control

A partir de las versiones más recientes, Angular ha marcado el inicio de la salida de sus directivas estructurales clásicas. Aunque estas herramientas han sido pilares del desarrollo durante años, la plataforma se dirige hacia una sintaxis denominada Control Flow Blocks.

Es fundamental que sepas que directivas como *ngIf, *ngFor y *ngSwitch han sido oficialmente señaladas para su retiro progresivo. Esto implica lo siguiente para tu trabajo diario:

• Compatibilidad temporal: Tus aplicaciones actuales no dejarán de funcionar repentinamente, ya que el soporte se mantiene para evitar rupturas inmediatas.

• Avisos en el entorno: A día de hoy ya se nota advertencias durante la fase de desarrollo que te sugerirán evitar estas prácticas en favor de las nuevas.

• Recomendación de uso: Para cualquier funcionalidad o proyecto que inicies actualmente, lo ideal es adoptar la nueva sintaxis desde el principio para evitar advertencias a futuro.

2. ¿Cuándo desaparecerán por completo?

El camino trazado de Angular indica que estas directivas clásicas podrían ser eliminadas completamente alrededor de Angular 22, lo que hace que la transición sea un paso necesario para mantener tus proyectos actualizados y seguros.

3. El nuevo estándar: @if

La alternativa moderna introducida es el bloque @if, el cual se alinea mucho más con la lógica natural de JavaScript. Este cambio no es meramente visual, sino que responde a una necesidad de optimizar el framework.
Puedes observar cómo la estructura se vuelve más intuitiva con el siguiente ejemplo:

Forma anterior:

HTML 5:

<div *ngIf="usuarioAutenticado">
  Bienvenido de nuevo
</div>

Sintaxis actual:

TypeScript:

@if (usuarioAutenticado) {
  <div>Bienvenido de nuevo</div>
}

4. ¿Qué nos ofrece esta nueva sintaxis?

Adoptar esta nueva forma de trabajar te ofrece ventajas directas en la calidad de tu código:

• Claridad superior: La lectura del código se vuelve más fluida al asemejarse a la lógica de programación estándar.

• Simplicidad estructural: Ya no tendrás que recurrir a etiquetas adicionales como ng-template para definir bloques alternativos o condiciones complejas.

• Optimización interna: Al ser una sintaxis integrada en el núcleo del framework, Angular logra procesar el renderizado de manera más ágil.

• Flujo explícito: Se elimina la ambigüedad que a veces generaban las directivas sobre los elementos del DOM, haciendo que el comportamiento sea más predecible.

5. El bloque de repetición: @for

Sustituye a *ngFor. La gran mejora aquí es la obligatoriedad de la propiedad track, lo que mejora prácticas de rendimiento por defecto. Además, incluye una solución integrada para listas vacías.

HTLM 5:

<ul>
  <li *ngFor="let producto of listaProductos; trackBy: trackById">
    {{ producto.nombre }}
  </li>
  <li *ngIf="listaProductos.length === 0">
    No hay productos disponibles.
  </li>
</ul>

TypeScript:

<ul>
  @for (producto of listaProductos; track producto.id) {
    <li>{{ producto.nombre }}</li>
  } @empty {
    <li>No hay productos disponibles.</li>
  }
</ul>

6.- El bloque de selección : @switch

Sustituye a *ngSwitch. Esta nueva estructura es notablemente menos verbosa y más fácil de leer al eliminar la necesidad de aplicar directivas en múltiples elementos anidados.

HTML 5:

<div [ngSwitch]="rolUsuario">
  <div *ngSwitchCase="'admin'">Panel de Administración</div>
  <div *ngSwitchCase="'editor'">Editor de Contenido</div>
  <div *ngSwitchDefault="">Vista de Invitado</div>
</div>

TypeScript:

@switch (rolUsuario) {
  @case ('admin') {
    <div>Panel de Administración</div>
  }
  @case ('editor') {
    <div>Editor de Contenido</div>
  }
  @default {
    <div>Vista de Invitado</div>
  }
}

7.- El bloque de carga : @defer

Aunque no reemplaza una directiva estructural clásica como las anteriores, es una de las innovaciones más potentes del nuevo flujo de control. Permite cargar componentes solo cuando son necesarios por ejemplo, cuando entran en el campo de visión del usuario.

HTML 5:

@switch (rolUsuario) {
  @case ('admin') {
    <div>Panel de Administración</div>
  }
  @case ('editor') {
    <div>Editor de Contenido</div>
  }
  @default {
    <div>Vista de Invitado</div>
  }
}

TypeScript:

@defer (on viewport) {
  <componente-pesado />
} @placeholder {
  <div>Cargando sección...</div>
} @loading {
  <spinner />
} @error {
  <p>Error al cargar el componente.</p>
}

CONCLUSIÓN

Cambiar de *ngIf a los nuevos bloques (@if, @for, @switch, @defer) es pasar de un Angular viejo a uno más rápido y fácil de mantener. Las directivas clásicas van a seguir funcionando un buen rato, pero si las sigues usando, te va a costar sudor y lágrimas actualizar tus proyectos más adelante, según el roadmap de Angular muy probablemente hasta la versión 22.

Empieza hoy con la nueva sintaxis de estos bloques y vas a escribir código más claro, sin esos ng-template engorrosos y además con un mejor rendimiento. Ya es el momento clave para pasarse a estas herramientas nuevas, incorporarlas en tus próximos proyectos y liderar el cambio en tu código, con esto tus apps serán más eficaces y modernas.

Autor: Kenny Rivero