Controle el flujo en Angular 17: Mejore su experiencia de desarrollo

Me complace compartir que puede mejorar su experiencia de desarrollo Angular dentro de Ignite UI for Angular componentes adoptando la nueva sintaxis de plantilla de bloque para un flujo de control integrado optimizado. Esta potente función simplifica el código, mejora la comprobación de tipos, reduce el tamaño del paquete y aumenta el rendimiento. Así que ahora, profundicemos en algunos ejemplos de código para ver la sintaxis en acción.

Try Ignite UI for Angular

¿Qué es el flujo de control incorporado en Angular?

El término "flujo de control" en Angular se refiere al orden en que se ejecutan las instrucciones y directivas dentro de una aplicación Angular. En Angular 17, hay una nueva sintaxis integrada optimizada para administrar el flujo de control (@if, @switch, @for), lo que ofrece a los desarrolladores un control más preciso sobre el flujo de ejecución. Esto acerca a los desarrolladores a los patrones conocidos en la mayoría de los lenguajes de programación, minimizando los errores en la construcción de vistas de aplicaciones. Está disponible directamente y listo para usar en plantillas sin importaciones adicionales.

En Angular 17, el flujo de control es administrado por el sistema de detección de cambios refinado, que aplica de manera eficiente los cambios de estado de la aplicación a la vista. Esto subraya el papel de Angular como proveedor de una base sólida para la creación de aplicaciones web modernas e interactivas.

Comenzando con declaraciones condicionales

Lo que tienes que hacer es actualizar tu *ngIf y *ngSwitch con la nueva sintaxis para un código más intuitivo y limpio.

@if

Use el @if dentro de una plantilla IgxColumn de IgxGrid para la representación condicional:

<igx-column field="Discontinued" header="Discontinued" [sortable]="true" [dataType]="'boolean'"> 
    <ng-template igxCell let-cell="cell" let-val> 
        @if (val) { 
            <img src="assets/active.png" title="Continued" alt="Continued" />
        } @else { 
            <img src="assets/expired.png" title="Discontinued" alt="Discontinued" /> 
        } 
    </ng-template> 
</igx-column> 

Demostración @if en IgxColumn

@switch 

Aplique @switch directiva dentro de un IgxSelectItem del componente IgxSelect para la selección de iconos dinámicos:

<igx-select-item [value]="fruit.type" class="select__entry" [text]="fruit.type">
    {{fruit.type}}
    @switch (fruit.delivery) {
    @case ('flight') { <igx-icon>flight</igx-icon> }
    @case ('train') { <igx-icon>train</igx-icon> }
    @case ('boat') { <igx-icon>directions_boat</igx-icon> }
    }
</igx-select-item>

Demo @switch en IgxSelect

Hablemos del bucle for incorporado a continuación

Experimente una velocidad de renderizado más rápida con el nuevo bucle for incorporado.

@for

Con esto se pueden resolver muchos casos de uso. En el ejemplo se usa IgxDropDown:

@for (town of towns | startsWith:townSelected; track town.name) {
    <igx-drop-down-item [value]="town">
        {{town}}
    </igx-drop-down-item>
}

Demo For Loop in IgxDropDown 

O recorriendo las columnas de la cuadrícula:

@for(c of columns; track c.field) {
    <igx-column
    [field]="c.field"
    [header]="c.field"
    [cellStyles]="c.cellStyles">
    </igx-column>
}

Demostración de bucle For en IgxGrid 

Vistas aplazables para carga diferida

Aproveche las nuevas vistas diferibles para mejorar la carga diferida con un enfoque declarativo y eficaz. Esta nueva característica puede darle la capacidad de crear una carga diferida de los elementos de la lista de los componentes IgxList. Aparecerán después de hacer clic en un botón:

<igx-list #fruitList>
    @defer (on interaction(b1)) {
        @for(fruit of fruitsData; track fruit) {
            <igx-list-item igxRipple igxRippleTarget=".igx-list__item-content">
                {{ fruit }}
            </igx-list-item>
        }
    } @placeholder {
        <button #b1 type="button" igxButton="raised">Click here to trigger interaction</button>
    }
</igx-list>

Vista demográfica diferible con IgxList 

Muestra combinada

Si lo desea, puede explorar un ejemplo más completo que integre todas las características mencionadas. Aquí, podemos diferir el contenido principal del cajón de navegación. Se cargará justo después de seleccionar un elemento de la navegación:

@defer(on interaction(drawer)) {
  <span igxButton="icon" igxToggleAction="navigation">
    <igx-icon family="material">menu</igx-icon>
  </span>
  <h5>{{selected}}</h5>
  @switch(selected) {
    @case('Grid') {
      <app-grid-adf-style-sample></app-grid-adf-style-sample>
    }
    @case('Autocomplete') {
      <app-autocomplete></app-autocomplete>
    }
    @default {
      <app-reactive-form-validation></app-reactive-form-validation>
    }
  }
} @placeholder {
  <span>Pick a component from nav drawer to load...</span>
}

Puede consultar la pestaña de red para ver el tiempo de carga inicial y los recursos de la aplicación. Dado que estamos aplazando el contenido principal del cajón de navegación, esto es lo que se carga:

Y una vez que el usuario selecciona un elemento, se cargan el contenido y los recursos de la vista:

Dependiendo del tamaño de las vistas diferidas, puede aumentar drásticamente el tiempo de carga. Puede encontrar más información sobre las vistas diferidas aquí.  Además, la lista de los elementos de navegación se puede lograr con la nueva sintaxis:

@for(item of navItems; track item.name) {
  <span igxDrawerItem igxRipple (click)="navigate(item)">
    <igx-icon family="material">{{ item.name }}</igx-icon>
    <span>{{ item.text }}</span>
  </span>
}

Además, en una de las vistas del ejemplo hay entradas de formulario reactivas que utilizan esta característica para mostrar las validaciones, los iconos y las sugerencias:

<igx-input-group>
    <label igxLabel for="password">Password</label>
    <input igxInput name="password" [type]="showPassword ? 'text' : 'password'" formControlName="password" />
    @if (password.errors?.minlength) {
        <igx-hint >Password should be at least 8 characters</igx-hint>
    }
    @if (password.value) {
        <igx-icon igxSuffix (click)="showPassword = !showPassword">
            {{ togglePasswordVisibility }}
        </igx-icon>
    }
</igx-input-group>

Empezando

Actualice su proyecto de Angular a la versión 17 y pruebe el flujo de control incorporado hoy mismo. Para usarlo en sus proyectos existentes. Explore la experiencia mejorada del desarrollador y aumente el rendimiento de su aplicación Angular.

¡Feliz codificación con el flujo de control de Angular mejorado!