Angular Academy · Aula

Projeção de conteúdo em um único espaço

Projete conteúdo com ng-content.

Projeção de conteúdo em um único espaço é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 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.

O que é projeção de conteúdo

A projeção de conteúdo permite que um componente receba marcação do componente pai e a renderize dentro do próprio modelo. Ela é o equivalente do Angular aos "slots" dos componentes web.

O componente pai escreve o conteúdo entre as tags do componente, e o componente decide onde esse conteúdo será exibido.

Por que isso é necessário

Contêineres reutilizáveis, como cartões, diálogos e painéis, não sabem antecipadamente qual será seu conteúdo. A projeção de conteúdo os transforma em contêineres flexíveis.

Crie um cartão uma vez e preencha-o com qualquer conteúdo
Mantenha a lógica de layout no componente
Mantenha o conteúdo no consumidor

O elemento ng-content

O elemento <ng-content> marca o local onde o conteúdo projetado será inserido. Uma configuração de slot único usa exatamente um <ng-content>, sem o atributo select.

@Component({
  selector: 'app-card',
  template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}

Usando o componente

Tudo o que o componente pai colocar entre as tags do componente será projetado no slot.

<app-card>
  <h2>Hello</h2>
  <p>This text is projected into the card.</p>
</app-card>

Slot único = uma saída

Com um slot único sem nome, todos os nós projetados vão para o único <ng-content>. Não há filtragem; a ordem é preservada exatamente como foi escrita pelo componente pai.

Conteúdo padrão

Você pode inserir uma marcação alternativa dentro de <ng-content>. O Angular moderno renderiza esse conteúdo padrão somente quando o consumidor não projeta nada nesse slot.

<div class="card">
  <ng-content>No content provided.</ng-content>
</div>

Estilizando o conteúdo projetado

O conteúdo projetado pertence à visualização do componente pai, portanto é estilizado pelos estilos do pai, não pelos do cartão. Para alcançar os nós projetados a partir do cartão, use ::ng-deep com moderação ou recorra a estilos globais.

Conteúdo versus visualização

O Angular distingue filhos de conteúdo (projetados para dentro) de filhos da visualização (declarados no modelo). Isso é importante para consultas como contentChild e viewChild.

icon = contentChild(IconComponent);

Ciclo de vida: ngAfterContentInit

O conteúdo projetado fica disponível depois que ngAfterContentInit() é executado. Use-o (ou ngAfterContentChecked) para ler com segurança os filhos de conteúdo.

ngAfterContentInit() {
  console.log('Projected content ready');
}

Um exemplo real de painel

Aqui está um painel reutilizável completo. O consumidor controla totalmente o interior; o painel controla a estrutura externa.

@Component({
  selector: 'app-panel',
  template: '<section class="panel"><ng-content></ng-content></section>',
  styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}

Erro comum

Colocar o mesmo <ng-content> sem nome duas vezes não duplica o conteúdo. O Angular projeta o conteúdo apenas no último slot correspondente. Use projeção em vários slots se precisar de várias regiões.

Verificação rápida

Teste sua compreensão da projeção em um único slot.

Recapitulação

Você aprendeu que a projeção de conteúdo usa <ng-content> para renderizar marcação fornecida pelo componente pai dentro de um componente. A projeção em um único slot usa uma saída sem nome, o conteúdo projetado pertence à visualização do pai e fica disponível em ngAfterContentInit.

Perguntas Frequentes

A aula “Projeção de conteúdo em um único espaço” é grátis?

Sim — o texto completo de “Projeção de conteúdo em um único espaço” é 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 “Projeção de conteúdo em um único espaço”?

Projete conteúdo com ng-content. 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 1 de 4.

Quanto tempo leva a aula “Projeção de conteúdo em um único espaço”?

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