¿Qué es la proyección de contenido con ng-content?

Question

Accepted Answer

**La proyección de contenido** permite que un componente acepte y renderice **el marcado pasado por su componente padre** — colocado a través de ``. Es cómo construyes componentes wrapper flexibles y reutilizables (tarjetas, diálogos, diseños) cuyo contenido interno controla el consumidor. (Es el equivalente de Angular a los slots de Vue/web-component y `children` de React.) ## Proyección de un único slot ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` La tarjeta proporciona el wrapper estilizado; el componente padre decide qué va dentro — mucho más flexible que pasar cadenas a través de `@Input`. ## Proyección de múltiples slots con select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` El atributo `select` (un selector CSS — atributo, clase o etiqueta) enruta cada pieza de contenido proyectado al slot `` correcto, habilitando diseños de múltiples regiones. ## El contenido proyectado mantiene su 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 qué es importante La proyección de contenido es la clave para construir componentes UI **reutilizables y composables** en Angular — tarjetas, modales, pestañas, diseños y cualquier "shell" donde el consumidor proporciona el contenido interno. Sin él, los componentes serían rígidos (solo configurables a través de inputs); con `` (y `select` para múltiples slots), se convierten en contenedores flexibles, lo cual es esencial para sistemas de diseño y bibliotecas de componentes compartidos.