Publicado em

- 1 minuto de leitura

Suporte para Untagged Template Literals no Angular

img of 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>
Imagem com o texto: Curso testes automatizado com Angular e um Robo azul com uma logo do Angular atrás. Logo abaixo existe um botão com o texto 'Eu quero!'

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

Author's photo
Henrique Custódia Arquiteto Frontend, entusiasta Angular, cat lover, criador de conteúdo e fundador da Code Dimension!

Assine nossa Newsletter e receba os últimos posts e novidades da Code Dimension!