Angular 17 trae consigo un conjunto de funciones vanguardistas que establecen nuevos estándares tanto en rendimiento como en la experiencia de desarrollo. En este post vamos a ver como podemos implementarlas en nuestro proyecto.

Instalación

Para instalar o actualiza a angular 17 abre el símbolo del sistema y ejecuta el siguiente comando:

npm install -g @angular/cli

Después para actualizar los paquetes del core ( @angular/core, @angular/compiler, y @angular/platform-browser ) de Angular ejecuta este comando:

ng update @angular/core

Si utilizas algún otro paquete de Angular también tendrás que actualizarlo.

Nueva sintaxis

Una de las mejoras más notables de esta actualización es la nueva sintaxis para el control de flujo integrado de Angular, donde antes se utilizaban las directivas *ngIf, *ngFor y *ngSwitch, que no solo es más intuitiva, sino que tiene una mejora del rendimiento bastante positiva.

Antes de echar un vistazo si quieres migrar automáticamente a esta nueva sintaxis ejecuta:

ng g @angular/core:control-flow

Condicionales

Con directivas:

<div *ngIf="statusDirectiva; else nostatus" class="alert alert-success">
      Status es {{statusDirectiva}}
</div>
<ng-template #nostatus>
      <div class="alert alert-danger">No hay status</div>
</ng-template>

Implementando la nueva sintaxis:

@if (statusNueva) {
     <div class="alert alert-success">Status es {{statusNueva}}</div> 
} @else {
     <div class="alert alert-danger">No hay status</div>
}

La nueva sintaxis nos da la posibilidad de usar else directamente, ademas de else if.

@if (edad < 0) {
     <div class="alert alert-danger">Edad no válida</div> 
} @else if (edad < 18) {
     <div class="alert alert-warning">Eres menor de edad</div> 
} @else {
     <div class="alert alert-success">Eres mayor de edad</div> 
}  

Switch

Con directivas:

<div [ngSwitch]="selectedOption">
    <div *ngSwitchCase="'option1'" class="alert alert-success">
        Opción 1 seleccionada
    </div>
    <div *ngSwitchCase="'option2'" class="alert alert-info">
        Opción 2 seleccionada
    </div>
    <div *ngSwitchCase="'option3'" class="alert alert-warning">
        Opción 3 seleccionada
    </div>
    <div *ngSwitchDefault class="alert alert-secondary">
        Ninguna opción seleccionada
    </div>
</div>

Implementando la nueva sintaxis:

@switch (selectedOption) {
    @case ('option1') { <div class="alert alert-success">Opción 1</div>}
    @case ('option2') { <div class="alert alert-info">Opción 2</div>}
    @case ('option3') { <div class="alert alert-warning">Opción 3</div>}
    @default { <div class="alert alert-secondary">Ninguna opción seleccionada</div>}
}

Bucle for

Con directivas:

<div *ngIf="nombres.length > 0" class="mb-4">
    <div *ngFor="let nombre of nombres" class="alert alert-info">
        {{nombre}}
    </div>
</div>

<div *ngIf="nombres.length == 0" class="alert alert-warning"> No hay nombres</div>

Implementando la nueva sintaxis:

@for (nombre of nombres; track nombre) {
    <div class="alert alert-info">{{nombre}}</div>
} @empty {
    <div class="alert alert-warning">No hay nombres</div>
}

track es obligatorio, y empty salta cuando la colección está vacía.

Vistas diferidas

Las vistas diferidas te permiten cargar de forma diferida (lazy loading) la lista de comentarios y todas sus dependencias transitivas con una sola línea de código.

Además esta característica te da la opción de cargar otras vistas mientras se carga la diferida, o si ocurre algún error.

@defer (when isCheckedDefer) {
    <div class="alert alert-success mt-3">
        <app-deferrableview />
    </div>
}
@placeholder {
    <div class="alert alert-secondary mt-3">
        <span >Placeholder</span>
    </div>
}
@error {
    <div class="alert alert-danger mt-3">
        <span >Error</span>
    </div>
}
@loading(minimum 1s) {
    <div class="alert alert-info mt-3">
        <span >Cargando...</span>
    </div>
}

Standalone predeterminadamente

Ahora, al crear un proyecto se crearán sus componentes, directivas, etc… en standalone.

¿Qué significa esto?

La principal diferencia es la ausencia del ngModule, y la necesidad de importar los modulos que necesites en cada componente. Además de no tener que exportar ModuleWithProviders en el Router.

Por lo tanto el app.routing.ts quedaría así:

View post on imgur.com

Añadiendo bootstrapApplication le pasamos los providers por ahí.

Y así quedaría el routing:

View post on imgur.com

Estas son las principales novedades de Angular 17, que proporcionan varias ventajas. Aún así, si alguna característica no te ha convencido, siempre puedes seguir usando Angular como antes, y en el caso de no querer usar esta última característica ejecuta este comando:

ng new --no-standalone

---

Autor: Rafael Librero

Curso: Desarrollo Web Full Stack + MultiCloud con Azure y AWS

Centro: Tajamar

Año académico: 2023-2024

Código: https://github.com/RafaelLibrero/Novedades-Angular-17.git