Novedades en Angular v17: Conoce la nueva sintaxis

Angular, uno de los frameworks más importantes de desarrollo web, lanzó su versión 17 y esta incluye una nueva sintaxis enfocada en mejorar el rendimiento y el tener un código más legible para controlar el flujo en el HTML.

¿Cómo se ve el cambio?

Los cambios los verás en los templates, ya que la lógica sigue siendo la misma. Veamos cómo cambiaría la sintaxis para mostrar un elemento u otro dependiendo de una condición.

Antes:

<h1 *ngIf="age >= 18; else elseBlock">You are over 18h1><ng-template #elseBlock><h1>you are under 18h1>ng-template>

Nueva sintaxis:

@if (age >= 18) {
	<h1>You are over 18h1>
} @else {
	<h1>you are under 18h1>
}

Esta nueva sintaxis es más clara y concisa, reduciendo la necesidad de contenedores adicionales como el ng-template. Además, es más fácil de entender si apenas estás aprendiendo Angular.

¿Y qué sucede con las iteraciones for?

Ahora, en lugar de usar ngFor, se adopta la estructura @for que se asemeja más a declarar directamente un bucle. Además, cuenta con la instrucción @empty para identificar cuando la lista está vacía.

Antes:

<ul><li *ngFor="let task of tasks">
    {{ task.title }} - {{ task.completed }}
  li><ng-container *ngIf="tasks.length === 0"><li>No tasks!li><button (click)="loadTasks()">Load tasksbutton>ng-container>ul>

Nueva sintaxis:

@for (task of tasks; track task.id) {
  <li>
    {{ task.title }} - {{ task.completed }}
  li>
} @empty {
  <li>No tasks!li><button (click)="loadTasks()">Load tasksbutton>
}

¿Y el ngSwitch también cambia?

Si, esta estructura de control también cambia y con la nueva sintaxis estaría representada con @switch.

Antes:

<div [ngSwitch]="name"><p *ngSwitchCase="'nicolas'">yo soy nicolasp><p *ngSwitchCase="'julian'">yo soy julianp><p *ngSwitchCase="'ana'">yo soy anap><p *ngSwitchDefault>yo no soy nadiep>div>

Nueva sintaxis:

@switch (name) {
  @case ('nicolas') { <p>yo soy nicolasp> }
  @case ('julian') { <p>yo soy julianp> }
  @case ('ana') { <p>yo soy anap> }
  @default { <p> yo no soy nadiep> }
}

¿Puedo seguir usando la sintaxis anterior?

Angular es conocido por su compatibilidad retroactiva, y en esta ocasión no es diferente. La nueva sintaxis es una adición, no una sustitución, lo que significa que aún puedes utilizar las sintaxis antigua si lo prefieres. Esto facilita la transición y la adaptación a las nuevas convenciones.

Por ejemplo, en el siguiente código verás como puedes utilizar la nueva sintaxis @if a la par que utilizas ngFor o ngIf, todo en el mismo template.

@if (show) {
	<main ><h1>If Blockh1><ul><li *ngFor="let task of tasks">
	      {{ task.title }} - {{ task.completed }}
	    li><ng-container *ngIf="tasks.length === 0"><li>No tasks!li><button (click)="loadTasks()">Load tasksbutton>ng-container>ul>main>
} @else {
	<h1 >Else Blockh1>
}

ok ¿Pero es solo un cambio de sintaxis?

No es solo un cambio de sintaxis. El equipo de Angular también ha implementado mejoras en el rendimiento que van de la mano. En una prueba de rendimiento, vemos una mejora en comparación con otros frameworks populares.

También se introduce un nuevo concepto en el cual podríamos realizar lazy loading a nivel de componentes utilizando la instrucción @defer directamente en el template. Esto podría mejorar significativamente el rendimiento de las aplicaciones al cargar componentes de manera diferida según las condiciones.

@defer (conditions) {
  <my-cmp />
} @loading {
  Loading...
} @error {
  Failed to load dependencies
}

¿Cómo usar la nueva sintaxis?

Puedes hacer una migración manual, pero Angular te trae una solución bastante cómoda, ya que con el comando ng g @angular/core:control-flow puedes migrar toda tu aplicación y moverla a la nueva sintaxis.

¿Cuál es la base de esta nueva sintaxis?

En el RFC (Request for Comments) llamado “Built-in Control Flow,” se explica que Angular busca simplificar su sintaxis y mejorar el control de flujo asimilando el de JavaScript. En este RFC, se menciona la inspiración en la sintaxis de Svelte, que se destaca por su rendimiento y su enfoque directo en el control de flujo.

Sin embargo, esta no es la primera vez que Angular se inspira en otros frameworks, en el pasado también tomo como referencia el modelo de reactividad de SolidJS.

Esta nueva sintaxis promete hacer que Angular sea más accesible y comprensible, simplificando la escritura de código y mejorando el flujo de trabajo de los desarrolladores. Puedes aprender y trabajar con esta sintaxis en el nuevo Curso de Angular v17 que Platzi tiene para ti.