Introdução

Com a chegada do Angular 18.1, esta versão introduz um novo recurso interessante para o compilador: a capacidade de declarar uma ou mais variáveis ​​de modelo.
Como esse recurso é usado e quais são os diferentes casos de uso?

Este artigo pretende responder.

O recurso mais recente do compilador: @let

Com as versões mais recentes do Angular, a equipe introduziu novas funcionalidades no compilador, e essa funcionalidade se traduz na @-sintaxe.

Foi assim que surgiu a nova sintaxe de fluxo de controle

• @se
• @para
• @trocar

e, mais recentemente, @let

Como regra geral, a maneira mais fácil de criar uma variável de modelo era usar o

• a diretiva estrutural *ngIf com a palavra-chave as palavra-chave

ou usando a nova sintaxe de fluxo de controle

• @if com a palavra-chave as

  {{ user.name }}



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

Esse recurso útil nos permitiu armazenar o resultado do canal assíncrono em uma variável para uso posterior no modelo.

No entanto, esta sintaxe levanta algumas questões. Aqui, a condição verifica se o retorno do pipe assíncrono é verdadeiro e, portanto, se o valor de retorno é diferente de qualquer valor considerado falso em javascript.

Esta condição funcionará muito bem se o retorno for um objeto ou um array.

mas se o retorno for um número e principalmente o número 0

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

É aqui que entra @let.

@let não verifica uma condição, apenas permite que você declare uma variável de modelo local de uma forma simples

então o exemplo de código acima se torna muito mais simples e elegante de escrever

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

Desta forma a variável myNumber sempre será exibida.

As diferentes maneiras de usar @let

Um dos cenários mais clássicos com declaração de variáveis ​​é armazenar o resultado de uma expressão complexa.

Sempre foi desaconselhável usar uma função em uma condição. A utilização de uma função em uma condição teve impacto no desempenho no sentido de que ao menor movimento do mouse, ou alteração no template, a função era reavaliada.

@let, conforme descrito acima, não avalia, mas simplesmente declara uma variável local. Esta variável será reavaliada somente se uma de suas dependências for alterada. Portanto, chamar uma função não é uma má ideia para expressões como expressão complexa.

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

Use o @let com sinais

@let é compatível com sinais e é usado da seguinte forma

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

Expressão @let e javascript

Como você pode ver, @let pode ser usado para avaliar qualquer tipo de expressão javascript, exceto, por exemplo, a instanciação de uma classe

Desta forma, os operadores aritméticos são interpretados e diversas variáveis ​​podem ser declaradas em diversas linhas diferentes ou apenas em uma linha.

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

Outras coisas legais que o @let traz

Conforme descrito acima, o comportamento de @let é muito semelhante ao comportamento de let em javascript, que tem os seguintes benefícios

• o escopo funciona como o escopo let em javascript
• melhor interferência de digitação no template
• um erro é gerado se uma variável (let) for usada antes de ser declarada