Publicado em
- 2 minutos de leitura
Conheça o novo operador @let do Angular 18
![img of Conheça o novo operador @let do Angular 18](/images/posts/let-cover.png)
Essa é uma transcrição do artigo oficial do Angular sobre o operador @let
A sintaxe de template do Angular está sendo estendida para fornecer aos desenvolvedores uma maneira de definir variáveis dentro de templates de componentes.
A nova sintaxe @let
permitirá que os desenvolvedores definam uma variável e reutilizem seu valor em todo o template. Esta sintaxe também aborda um dos problemas mais votados pela comunidade.
Nesse artigo você vai aprender como utilizar @let
em seus componentes.
Caso você goste mais do formato em vídeo, temos o seguinte conteúdo no nosso canal no Youtube:
Definindo variáveis reutilizáveis em templates
A sintaxe de template do Angular suporta expressões JavaScript complexas, mas não havia uma maneira prática de armazenar o resultado de uma expressão e reutilizá-lo no template.
Os desenvolvedores tinham que usar soluções alternativas para atingir esse objetivo com diretivas e outras abordagens.
Exemplo de sintaxe:
@let nome = valor; // onde valor é uma expressão Angular válida
No template, uma variável pode ser definida e usada conforme as regras da sintaxe de template do Angular. Por exemplo:
@let nome = 'Frodo';
<h1>Painel de controle para {{nome}}</h1>
Olá, {{nome}}
Outro exemplo de uso do @let
em um template:
<!-- Uso com uma variável de template referenciando um elemento -->
<input #nome />
@let saudacao = 'Olá ' + nome.value;
<!-- Uso com um pipe assíncrono -->
@let usuario = usuario$ | async;
As declarações @let
são limitadas à visualização atual e seus descendentes, mas não podem ser acessadas por visualizações pai ou irmãs.
@let nivelSuperior = valor;
@if (condicao) {
@let aninhado = valor;
}
<div *ngIf="condicao">
@let aninhadoNgIf = valor;
</div>
<!-- Válido -->
{{nivelSuperior}}
<!-- Erro, não promovido de @if -->
{{aninhado}}
<!-- Erro, não promovido de *ngIf -->
{{aninhadoNgIf}}
As declarações @let
são somente leitura e não podem ser reatribuídas.
Seus valores serão recomputados a cada detecção de mudanças (por exemplo, se um pipe assíncrono mudar). Tentar escrevê-las diretamente resultará em um erro de verificação de tipo.
@let valor = 10;
<!-- Erro: `valor` não é atribuível -->
<button (click)="valor = valor + 1">Alterar o valor</button>
Definição de sintaxe
Detalhes da definição de sintaxe para a sintaxe @let
:
- A palavra-chave
@let
. - Seguido por um ou mais espaços em branco, excluindo novas linhas.
- Seguido por um nome JavaScript válido e zero ou mais espaços em branco.
- Seguido pelo símbolo
=
e zero ou mais espaços em branco. - Seguido por uma expressão Angular que pode ser multilinha.
- Terminada pelo símbolo
;
.
Sobre o autor
![Author's photo](/images/authors/me.jpg)