El nuevo Control Flow en Angular

O Control de flujo en Angular.

Ahora en Angular tenemos un nuevo control flow(Control de flujo) esta es una vista preliminar de Angular 17, el cual será lanzado en noviembre, pero podemos ir dando un vistazo al nuevo Control Flow y Vistas Diferidas(Deferrable Views).

El Control Flow de Angular ahora es declarativo y de esta una nueva forma podemos crear condiciones y bucles en las plantillas de Angular. La sintaxis actual de Angular para el control de flujo utiliza las directivas estructurales ngIf, ngFor y ngSwitch.

Aquí una comparación de la forma Antigua vs la Nueva:

html
<div *ngIf="usuarioLoggeado; else noAutenticado"></div>

<ng-template #noAutenticado> </ng-template>

Como podemos ver en este ejemplo, usamos el condicional else para crear él id para asignar al ng-template, pero que pasa si queremos gestionar al usuario logueado de manera individual, bueno se vería así:

html
<div *ngIf="usuarioLoggeado; then autenticado else noAutenticado"></div>

<ng-template #autenticado> </ng-template>

<ng-template #noAutenticado> </ng-template>

Ahora veremos el mismo ejemplo pero con unas ligeras usando el nuevo Control Flow:

@if (usuarioLoggeado) { } --> } @else { }

Más ejemplos:

for:

html
<div *ngFor="let pais of paises">
  <option value="{{pais.id}}">{{pais.nombre}}</option>
</div>

lo cual parece no ser un gran cambio pero

html
@for( pais of paises){
<option value="{{pais.id}}">{{pais.nombre}}</option>
}

y que pasa sí que queremos añadir una función de buscar por:

html
@for( pais of paises; track pais.reconocido){
<option value="{{pais.id}}">{{pais.nombre}}</option>
}

podemos ver que es más fácil a comparación de la manera antigua que sería así:

html
<div *ngFor="let pais of paises; trackBy: trackByFn">
  <option value="{{pais.id}}">{{pais.nombre}}</option>
</div

trackByFn(_: boolean, pais: Pais) {
  return pais.reconocido
}

switch

html
@switch (lenguajes) { @case (python) {
<span> El lenguaje de programación seleccionado es: Python </span>
} @case (ruby) {
<span> El lenguaje de programación seleccionado es: Ruby </span>
} @case (java) {
<span> El lenguaje de programación seleccionado es: Java </span>
} @case (Pearl) {
<span> El lenguaje de programación seleccionado es: Pearl </span>
} @default {
<span> No hay unlenguaje de programación seleccionado </span>
} }

este es un cambio significativo comparado con:

html
<section [ngSwitch]="lenguajes">
  <span *ngSwitchCase="'python'">
    El lenguaje de programación seleccionado es: Python
  </span>

  <span *ngSwitchCase="'ruby'">
    El lenguaje de programación seleccionado es: Ruby
  </span>

  <span *ngSwitchCase="'java'">
    El lenguaje de programación seleccionado es: Java
  </span>

  <span *ngSwitchCase="'pearl'">
    El lenguaje de programación seleccionado es: Pearl
  </span>

  <span *ngSwitchDefault> No hay unlenguaje de programación seleccionado </span>
</section>

Como podemos ver, Nuestra plantilla HMTL se redujo considerablemente y ahora es más legible y por ende mantenible.

Deferrable Views

O Vistas Diferidas, este término se refiere a que las vistas pueden ser aplazar o esperar hasta que algo suceda, pero esto prefiero explicarlo más a detalle en este artículo

@for( pais de paises){ @defer(on timer(100ms)){ } }

también podemos customizar las acciones como ser:

html
@defer (on interaction( la interacion )) {
<h1>Hola me llamaron de una interacción</h1>
}

Pero de donde salió todo esto bueno, de propuestas para Control Flow y Deferrable Views de la cual en un principio se tenía pensado usar etiquetas como las de HTML del estilo {#if}, {:else} y también {/if} lo cual podría llegar a ser confuso, pero al final a raíz de una votación se llegó al consenso de usar @-sintaxis.

No cabe duda que con este Nuevo Control Flow en Angular podremos hacer proyecto más intuitivos y aprovechar, además de crear código más ordenado y legible, aunque todavía existen algunos retos y cosas que afinar, estoy seguro de que en noviembre con el lanzamiento de Angular 17 tendremos más información y ejemplos.

Angular Control Flow Syntax: Goodbye ngIf and ngFor

El nuevo Control Flow en Angular

Más ejemplos:

Mastering Angular Signals: A Guide to Reactive State