<aside> 💡 Data de publicação: 28/11/2023
</aside>
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.
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.
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>
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.