O que é projeção de conteúdo com ng-content?

Question

Accepted Answer

**Content projection** permite que um componente aceite e renderize **markup passado por seu pai** — colocado via ``. É como você constrói componentes wrapper flexíveis e reutilizáveis (cards, diálogos, layouts) cujo conteúdo interno o consumidor controla. (É o equivalente do Angular para slots de Vue/web-component e `children` do React.) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` O card fornece o wrapper estilizado; o pai decide o que vai dentro — muito mais flexível do que passar strings via `@Input`. ## Multi-slot projection com select ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` O atributo `select` (um seletor CSS — atributo, classe ou tag) roteia cada parte do conteúdo projetado para o slot `` correto, permitindo layouts multi-região. ## Conteúdo projetado mantém seu contexto original ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Por que isso importa Content projection é a chave para construir componentes de UI **reutilizáveis e compostos** no Angular — cards, modais, abas, layouts e qualquer "shell" onde o consumidor fornece o conteúdo interno. Sem ela, componentes seriam rígidos (apenas configuráveis via inputs); com `` (e `select` para múltiplos slots), eles se tornam containers flexíveis, o que é essencial para design systems e bibliotecas de componentes compartilhadas.