Guias Detalhados
Templates

Template syntax

No Angular, um template é um trecho de HTML. Use sintaxe especial dentro de um template para aproveitar muitas das funcionalidades do Angular.

TIP: Confira os Fundamentos do Angular antes de mergulhar neste guia abrangente.

Todo component Angular tem um template que define o DOM que o component renderiza na página. Ao usar templates, o Angular é capaz de manter automaticamente sua página atualizada conforme os dados mudam.

Os templates geralmente são encontrados dentro da propriedade template de um arquivo *.component.ts ou do arquivo *.component.html. Para saber mais, consulte o guia detalhado de components.

Como funcionam os templates?

Os templates são baseados na sintaxe HTML, com funcionalidades adicionais como funções de template built-in, data binding, event listening, variáveis e muito mais.

O Angular compila templates em JavaScript para construir uma compreensão interna da sua aplicação. Um dos benefícios disso são as otimizações de renderização built-in que o Angular aplica à sua aplicação automaticamente.

Diferenças do HTML padrão

Algumas diferenças entre templates e sintaxe HTML padrão incluem:

  • Comentários no código fonte do template não são incluídos na saída renderizada
  • Elementos de component e directive podem ser auto-fechados (ex.: <UserProfile />)
  • Atributos com certos caracteres (i.e., [], (), etc.) têm significado especial para o Angular. Consulte a documentação de binding e documentação de adição de event listeners para mais informações.
  • O caractere @ tem um significado especial para o Angular para adicionar comportamento dinâmico, como control flow, aos templates. Você pode incluir um caractere @ literal escapando-o como um código de entidade HTML (&commat; ou &#64;).
  • O Angular ignora e colapsa caracteres de espaço em branco desnecessários. Consulte whitespace em templates para mais detalhes.
  • O Angular pode adicionar nós de comentário a uma página como espaços reservados para conteúdo dinâmico, mas desenvolvedores podem ignorá-los.

Além disso, embora a maioria da sintaxe HTML seja sintaxe de template válida, o Angular não suporta o elemento <script> em templates. Para mais informações, consulte a página de Segurança.

Próximos passos

Você também pode estar interessado no seguinte:

Tópicos Detalhes
Binding de texto, propriedades e atributos dinâmicos Vincular dados dinâmicos a texto, propriedades e atributos.
Adicionando event listeners Responder a eventos em seus templates.
Two-way binding Vincular simultaneamente um valor e propagar mudanças.
Control flow Mostrar, ocultar e repetir elementos condicionalmente.
Pipes Transformar dados declarativamente.
Inserindo conteúdo filho com ng-content Controlar como components renderizam conteúdo.
Criar fragmentos de template com ng-template Declarar um fragmento de template.
Agrupando elementos com ng-container Agrupar múltiplos elementos juntos ou marcar uma localização para renderização.
Variáveis em templates Aprender sobre declarações de variáveis.
Carregamento diferido com @defer Criar views diferíveis com @defer.
Sintaxe de expressão Aprender semelhanças e diferenças entre expressões Angular e JavaScript padrão.
Whitespace em templates Aprender como o Angular lida com whitespace.