Angular Academy · Aula

ng-template e ng-container

Defina e hospede fragmentos de modelo.

ng-template e ng-container é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Modelos que não são renderizados

<ng-template> define um trecho de marcação que não é renderizado até que algo o instancie explicitamente. Ele é a base de diretivas estruturais como *ngIf.

Definindo um modelo

O conteúdo dentro de <ng-template> permanece inerte. Você atribui a ele uma variável de referência para usá-lo em outro local.

<ng-template #empty>
  <p>No items found.</p>
</ng-template>

Renderizando com ngTemplateOutlet

Use ngTemplateOutlet para renderizar um modelo por referência.

<ng-container *ngTemplateOutlet="empty"></ng-container>

<ng-template #empty>
  <p>No items found.</p>
</ng-template>

Por que usar ng-container

<ng-container> é um elemento de agrupamento lógico, que não pertence ao DOM. Ele permite aplicar diretivas ou agrupar nós sem adicionar um elemento contêiner extra ao DOM.

Evitando divs contêineres

Sem ng-container, você poderia adicionar uma <div> inútil apenas para hospedar uma diretiva. ng-container desaparece da saída renderizada.

<ng-container *ngIf="user">
  <h2>{{ user.name }}</h2>
  <p>{{ user.email }}</p>
</ng-container>

Agrupando o fluxo de controle

ng-container é excelente para envolver novos blocos de fluxo de controle sem adicionar elementos ao DOM.

<ng-container *ngIf="ready">
  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  }
</ng-container>

Contexto do modelo

Os modelos podem receber um objeto de contexto, expondo valores por meio de variáveis let-.

<ng-template #row let-name="name">
  <p>{{ name }}</p>
</ng-template>

<ng-container
  *ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>

Valor de contexto padrão

O valor de contexto especial $implicit é associado a uma variável let- sem uma chave atribuída.

<ng-template #item let-value>
  <span>{{ value }}</span>
</ng-template>

<ng-container
  *ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>

Modelos são elementos de primeira classe

Um #ref em um <ng-template> é um TemplateRef. Você pode passá-lo como um @Input para permitir que os consumidores personalizem partes da interface.

emptyTemplate = input<TemplateRef<unknown>>();

ng-container como hospedeiro

ng-container também é útil como hospedeiro de saída para componentes ou modelos dinâmicos, mantendo o DOM limpo.

<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>

Quando usar cada um

ng-template: marcação adiada ou reutilizável. ng-container: agrupamento e hospedagem de diretivas sem adicionar elementos ao DOM. Eles geralmente são usados em conjunto.

Verificação rápida

Teste sua compreensão de ng-template e ng-container.

Recapitulação

Você aprendeu que <ng-template> contém marcação inerte e instanciável, renderizada por meio de ngTemplateOutlet (com contexto opcional), enquanto <ng-container> agrupa nós ou hospeda diretivas sem adicionar elementos ao DOM.

Perguntas Frequentes

A aula “ng-template e ng-container” é grátis?

Sim — o texto completo de “ng-template e ng-container” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “ng-template e ng-container”?

Defina e hospede fragmentos de modelo. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “ng-template e ng-container”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy