Guía de Content Projection en Angular: paso a paso

Uno de los platos más sencillos de preparar es una hamburguesa. Aunque la base siempre es la misma, los ingredientes pueden variar, así que vamos a crear nuestro propio componente de hamburguesa versátil.

Hoy te explico cómo usar ng-content para definir un área flexible y trabajar con múltiples slots.

• Usar ng-content para proyección de contenido.

• Usar múltiples slots para proyección de contenido.

Si quieres probar el proyecto interactivo, entra en https://burger-angular-content-projection-demo.stackblitz.io

Nuestro escenario

Tenemos una lista de componentes de ingredientes para preparar nuestro burger component: <top-bun></top-bun>, <cheese></cheese>, <bottom-bun></bottom-bun>, <tomato></tomato>, <onion></onion> y <meat></meat>.

La idea principal es crear un componente hamburguesa y colocar nuestros ingredientes dentro, igual que en una hamburguesa real, usando la proyección de contenido de Angular.

Content Projection y ng-content

Angular nos permite hacer componentes reutilizables mediante la proyección de contenido (Content Projection). Esta característica nos permite declarar un área dentro del componente pensada para recibir elementos dinámicos desde el exterior.

Nos ayuda a crear un contenedor y definir qué información o elementos forman parte del componente.

Con la etiqueta ng-content, le indicamos a Angular que reemplace esa área con nuestros elementos o componentes hijos.

Primero, creamos el componente hamburguesa y usamos la etiqueta ng-content en la plantilla.

import { Component } from '@angular/core';
 
@Component({
  selector: 'burger',
  templateUrl: './burger.component.html',
})
export class BurgerComponent {}

<div class="burger">
  <ng-content></ng-content>
</div>

Perfecto, paso completado. Ahora movemos los ingredientes al cuerpo del componente <burger>.

<burger>
  <top-bun></top-bun>
  <cheese></cheese>
  <tomato></tomato>
  <onion></onion>
  <meat></meat>
  <bottom-bun></bottom-bun>
</burger>

¡Funciona! El componente hamburguesa permite recibir componentes hijos en su interior y actúa como contenedor.

¿Por qué la carne no está en el medio?

Múltiples slots

En cualquier hamburguesa, la carne va en el centro. Queremos la flexibilidad de agregar componentes sin romper la estructura de nuestra hamburguesa, por lo que el componente debe renderizar cada elemento en una zona específica.

Para lograrlo, ng-content cuenta con el atributo select, que permite filtrar el contenido mediante selectores CSS como clases o atributos. Así definimos las zonas exactas.

Actualizamos el componente hamburguesa con lo siguiente:

• Agregamos <top-bun> y <bottom-bun> por defecto para todas las hamburguesas.

• 3 ng-content con los selectores top, middle y bottom.

• Un ng-content para el precio.

• Un ng-content por defecto para ingredientes sin ubicación específica.

<div class="burger">
  <top-bun></top-bun>
  <ng-content select="[top]"></ng-content>
  <ng-content select="[middle]"></ng-content>
  <ng-content select="[bottom]"></ng-content>
  <bottom-bun></bottom-bun>
</div>
 
<div class="price">
  <ng-content select="[price]"></ng-content>
</div>
 
<div>
  <p>These ingredients don't have a location</p>
  <ng-content></ng-content>
</div>

Ya tenemos listo nuestro componente de hamburguesa. Si algún ingrediente no tiene una ubicación asignada mediante atributos, se mostrará en el bloque por defecto.

El tomate y la cebolla no tienen atributos de selector, por lo que van directo al ng-content por defecto.

<!-- Hamburguesa con ingredientes sin ubicación específica. -->
<burger>
  <tomato></tomato>
  <cheese top></cheese>
  <meat middle></meat>
  <onion></onion>
  <span price>4€</span>
</burger>

¡Listo!

Creamos un componente reutilizable con proyección de contenido que permite armar nuevas hamburguesas de forma muy sencilla. Este componente asegura que los ingredientes clave se ubiquen en zonas específicas y ofrece un espacio por defecto para el resto.

Probar demo en StackBlitz

¡Eso es todo! Espero que esta guía te ayude a entender cómo funciona ng-content y a crear componentes mucho más flexibles en tus proyectos de Angular.

Si te gustó este artículo, ¡compártelo!

Foto de Haseeb Jamil en Unsplash