El conocimiento es el nuevo dinero.
Aprender es la nueva manera en la que inviertes
Acceso Cursos

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

El nuevo flujo de control está previsto para la versión Angular v17 que probablemente se presentaría al público en noviembre de 2023. En la versión Angular v17.0.0-next.6, el equipo ha enviado los cambios en el flujo de control que no están listos para la producción, pero podemos jugar con ellos.

· 2 min de lectura
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

Plataforma de cursos gratis sobre programación

Artículos Relacionados

Transiciones en el Router Angular 17
· 3 min de lectura
Errores comunes de RxJS en Angular
· 4 min de lectura
¿Por qué evitar usar 'any' en TypeScript?
· 5 min de lectura
Module Federation Dinámico con Angular
· 7 min de lectura