Publicado em
- 1 minuto de leitura
Suporte para Untagged Template Literals no Angular

Este artigo é baseado no excelente trabalho de Netanel Basal
A versão mais recente do Angular, 19.2.0-next.0, introduz um recurso poderoso que os desenvolvedores vão adorar: suporte para Untagged Template Literals em expressões.
Esse recurso traz mais flexibilidade e expressividade aos templates do Angular, permitindo aos desenvolvedores escrever templates mais limpos, concisos e dinâmicos sem soluções alternativas extras.
Vamos explorar o que isso significa e como você pode aproveitá-lo em seus aplicativos.
As seções abaixo mostram alguns casos de uso onde a utilização de Untagged Template Literals pode simplificar seus templates Angular:
Conteúdo dinâmico
Você pode incorporar diretamente expressões dinâmicas em seus templates:
<p>Mensagem: {{ `Olá, ${nome} - ${valor}` }}</p>
Classes dinâmicas
Criar nomes de classe dinâmicos nunca foi tão fácil:
<p class="{{ `foo-${postfix}` }}">Classe personalizada</p>
<p [class]="`foo-${postfix}`">Classe personalizada</p>
Ambos os exemplos alcançam o mesmo resultado: atribuir classes dinamicamente com base no valor de postfix
.
Interpolações com várias expressões
Lide facilmente com interpolações mais complexas:
<p>Com interpolações: {{ `Olá ${nome}, atualmente é ${horaDoDia}!` }}</p>

Pipes e Untagged Template Literals
Untagged Template Literals também podem ser combinados com pipes do Angular:
<p>Com pipe: {{ `olá ${nome}` | uppercase }}</p>
Neste caso, todo o Untagged Template Literal é passado pelo pipe uppercase, transformando-o em texto maiúsculo.
URLs dinâmicas
Simplifique a geração de URL dinâmica para imagens ou outros ativos:
<img [src]="`${base}/600x400`" />
Loops com Untagged Template Literals
Você pode usar Untagged Template Literals mesmo nas diretivas estruturais do Angular, como @for:
@for(n of [1,2,3]; trackBy $index) {
<button [attr.data-id]="'${n}-button'">Clique em {n}</button>
}
Isso permite a renderização dinâmica de conteúdo repetido ao incorporar valores diretamente nas strings.
Obrigado por ler até aqui e até mais! 😎
Sobre o autor
