Introducción

Con la llegada de Angular 18.1, esta versión introduce una nueva característica interesante en el compilador: la capacidad de declarar una o más variables de plantilla.
¿Cómo se utiliza esta característica y cuáles son los diferentes casos de uso?

Este artículo tiene como objetivo responder.

La última característica del compilador: @let

Con las últimas versiones de Angular, el equipo ha introducido una nueva funcionalidad en el compilador, y esta funcionalidad se traduce en la @-sintaxis.

Así surgió la nueva sintaxis del flujo de control

• @si
• @para
• @cambiar

y, más recientemente, @let

Como regla general, la forma más sencilla de crear una variable de plantilla era utilizar el

• la directiva estructural *ngIf con la palabra clave as palabra clave

o usando la nueva sintaxis de flujo de control

• @if con la palabra clave como

  {{ user.name }}



@if(user$ |async; as user){
  
{{ user.name }}
}

Esta práctica característica nos permitió almacenar el resultado de la canalización asíncrona en una variable para usarla más adelante en la plantilla.

Sin embargo, esta sintaxis plantea algunas preguntas. Aquí, la condición verifica si el retorno de la tubería asíncrona es verdadero y, por lo tanto, si el valor de retorno es diferente de cualquier valor considerado falso en javascript.

Esta condición funcionará muy bien si el retorno es un objeto o una matriz.

pero si la devolución es un número y particularmente el número 0

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  
{{ myNumber }}
}

Aquí es donde entra @let.

@let no verifica una condición, solo te permite declarar una variable de plantilla local de una manera sencilla

por lo que el ejemplo de código anterior se vuelve mucho más simple y elegante de escribir

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

De esta manera siempre se mostrará la variable myNumber.

Las diferentes formas de usar @let

Uno de los escenarios más clásicos con declaración de variables es almacenar el resultado de una expresión compleja.

Siempre ha sido desaconsejable utilizar una función en una condición. El uso de una función en una condición tenía un impacto en el rendimiento en el sentido de que al más mínimo movimiento del mouse o cambio en la plantilla, la función era reevaluada.

@let, como se describió anteriormente, no evalúa, simplemente declara una variable local. Esta variable será reevaluada solo si una de sus dependencias cambia. Por lo tanto, llamar a una función no es una mala idea para expresiones como las expresiones complejas.

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

Usa el @let con señales

@let es compatible con señales y se utiliza de la siguiente manera

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

expresión @let y javascript

Como puedes ver, @let se puede utilizar para evaluar cualquier tipo de expresión javascript, aparte de, por ejemplo, la instanciación de una clase

De esta manera se interpretan los operadores aritméticos y se pueden declarar varias variables en varias líneas diferentes o solo en una línea.

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

Otras cosas chidas que trae @let

Como se describió anteriormente, el comportamiento de @let es muy similar al comportamiento de let en javascript, que tiene los siguientes beneficios

• el alcance funciona como el alcance let en javascript
• mejor interferencia al escribir en la plantilla
• se genera un error si se usa una variable (let) antes de ser declarada