dev-resources.site
for different kinds of informations.
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:
<div *ngIf="usuarioLoggeado; else noAutenticado">
<!-- Datos de usuario Autenticado que queremos mostrar-->
</div>
<ng-template #noAutenticado>
<!-- Datos de usuario No Autenticado que queremos mostrar-->
</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铆:
<div *ngIf="usuarioLoggeado; then autenticado else noAutenticado"></div>
<ng-template #autenticado>
<!-- Datos de usuario No Autenticado que queremos mostrar-->
</ng-template>
<ng-template #noAutenticado>
<!-- Datos de usuario No Autenticado que queremos mostrar-->
</ng-template>
Ahora veremos el mismo ejemplo pero con unas ligeras usando el nuevo Control Flow:
@if (usuarioLoggeado) {
<!-- Si deseamos cargar los datos de manera lazy podemos usar
@defer {
<!-- Datos de usuario Autenticado que queremos mostrar -->
}
-->
} @else {
<!-- Datos de usuario No Autenticado que queremos mostrar-->
}
M谩s ejemplos:
for:
<div *ngFor="let pais of paises">
<option value="{{pais.id}}">{{pais.nombre}}</option>
</div>
lo cual parece no ser un gran cambio pero
@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:
@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铆:
<div *ngFor="let pais of paises; trackBy: trackByFn">
<option value="{{pais.id}}">{{pais.nombre}}</option>
</div
trackByFn(_: boolean, pais: Pais) {
return pais.reconocido
}
switch
@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:
<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)){
<!-- Esto hara una espera que se carque el componente se usa cuando tenemos componente grandes-->
}
}
tambi茅n podemos customizar las acciones como ser:
@defer (on interaction( la interacion )) { <!-- como ser click , hover ,etc -->
<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.
Featured ones: