<aside> 💡 Data de publicação: 28/11/2023

</aside>

O que é projeção de conteúdo (content projection)?

projeção de conteúdo é uma forma de um componente utilizar dados/estruturas vindas de um outro componente, com isso nós temos muito poder de criação e customização de componentes.

Bibliotecas ou frameworks nos dão essas possibilidades, Como no angular, que temos ng-content para projeção direta de conteúdo*, ngTemplateOutlet* para definirmos o que será projetado no local desse template, ngTemplateOutletContext para passarmos dados de um template para o pai desse template e por fim o ngTemplateOutletInjector que nos permite passar algum injector via template.Já com React temos os Slots, que são muito similares ao ng-content e com ele podemos definir diferentes partes do nosso componente que irão receber conteúdo para ser projetado.

Quais problemas a projeção de conteúdo quer resolver?

Com a projeção de conteúdo conseguimos criar componentes mais customizáveis e agnósticos a estrutura geral, assim caso necessário podemos realizar mudanças no uso desse componente sem a necessidade de modificá-lo internamente.

Como projetar conteúdo com Angular?

Dentro do Angular temos como projetar conteúdo de um jeito simples com o ng-content, utilizando seletores ou não.

A principal vantagem de utilização do ng-content é a simplicidade do seu uso e como podemos adicionar “poderes” às nossas projeções com os seletores, assim podemos customizar as seções dessa projeção.

<app-card>
  <header>My card</header>
  <p>Content</p>
  <footer>Footer</footer>
</app-card>

Além da projeção básica podemos adicionar labels para nossos seletores, assim conseguimos adicionar partes nos locais desejados

<app-card>
  <h2 header>My card</h2>
  <p>Content</p>
  <p footer>Footer</p>
</app-card>

Como projetar conteúdo com React?

Com React podemos passar valores como children, dessa forma conseguimos, por exemplo utilizar uma div com outros três componentes que o nosso componente (Card) que está esperando essa prop e irá renderizar essa porção de UI.

<Card>
 <p>Content</p>
</Card>

Além da prop children, podemos utilizar outras props para compor melhor o nosso componente

<Card header={<header>Header</header>} footer={<footer>Footer</footer>}>
  <p>Content</p>
</Card>

Até aqui já temos algo bem interessante, com type-safety se estivermos usando TypeScript. Mas podemos melhorar e facilitar essa implementação com uma composição de componentes.