Angular - Nuevo flujo de control con un ejemplo práctico

Si usted está viendo los trabajos recientes de Angular, probablemente sabría la adición de nuevos flujos de control con una nueva sintaxis.

Veamos cuáles son los flujos de control disponibles.

Recuerda que si quieres aprender angular te dejo el curso

Sentencia If else

En versiones anteriores, NgIf se utiliza para mostrar elementos DOM condicionalmente, lo cual es declarativo pero no es adecuado para la nueva estrategia de detección de cambios. El nuevo bloque @if resolverá este problema y funcionará bien con la detección de cambios basada en señales.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  show = true;
  showAnotherIf = false;
}

@if (show) {
  <span>Inside if</span>
} @else if (showAnotherIf) {
  <span>Inside else if</span>
} @else {
  <span>Inside else</span>
}

El aliasing es útil a veces para utilizar el resultado de la evaluación dentro del contexto del bloque. Puede especificar un alias utilizando la palabra clave as de la siguiente manera.

@if (canLoad(); as isLoaded) { // canLoad() returns boolean.
    <span>Is Loaded - {{isLoaded}}</span>
}

Bucle for

El bucle for permite mostrar el contenido dado basándose en el objeto iterable y proporciona algunas propiedades de contexto útiles con las que trabajar. Además, proporciona el bloque @empty que se mostrará cuando no haya ningún elemento en el array dado.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  skills = ['javascript', 'html', 'css'];
}

<ul>
  @for (item of skills; track item; let i = $index, f = $first; let l = $last, ev = $even, o = $odd; let co = $count) {
    <li>{{item}}
      <ul>
        <li>Index - {{i}}</li>
        <li>Is First - {{f}}</li>
        <li>Is Last - {{l}}</li>
        <li>Is even - {{ev}}</li>
        <li>Is odd - {{o}}</li>
        <li>Count - {{co}}</li>
      </ul>
    </li>
  } @empty {
    <li>No item</li>
  }
</ul>

Switch

Caso de conmutación

El nuevo flujo de control @switch case puede utilizarse de la siguiente manera. Puede utilizar el bloque @default para mencionar el contenido predeterminado que se mostrará cuando no coincida ningún caso.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  caseNo = 4;
}

@switch (caseNo) {
  @case (1) {
    <span>Rendering case 1</span>
  }
  @case (2) {
    <span>Rendering case 2</span>
  }
  @case (3) {
    <span>Rendering case 3</span>
  }
  @default {
    <span>Rendering default</span>
  }
}

¿Cómo habilitar el nuevo flujo de control en Angular v17.0.0-next.6?

A pesar de que los cambios están disponibles en el paquete, no se puede utilizar directamente esto ahora y terminará con el siguiente error.

Error NG5002: Mensaje ICU no válido. Falta '}' o error NG5002: Carácter inesperado "EOF" (¿Tiene un "{" sin escapar en su plantilla? Utilice "{{ '{' }}") para escaparlo).

Para probar los nuevos flujos de control ahora tienes que añadir la siguiente configuración en el angularCompileroptions .

{
  "angularCompilerOptions": {
    ....
    "_enabledBlockTypes": [
      "if", "switch", "for"
    ]
  }
}

Tengo la voz de tu mente, sí _enabledBlockTypes es un interno que se cambiará con el tiempo. Pero por ahora, te permitirá jugar con los flujos de control.

Fuente