Alain Chautard
Apr 25, 2019 · 4 min read

ng-content is the directive used to achieve transclusion a.k.una proyección de contenido

Si aprendió Angular JS antes de cambiar a Angular, es posible que esté familiarizado con el término transclusión. Por otro lado, si no tienes idea de lo que es la transclusión, el nuevo nombre para ello en Angular es proyección de contenido, y eso es lo que vamos a cubrir en este post.

La proyección de contenido consiste en pasar una parte del árbol DOM de un componente padre a un componente hijo.

Es perfecto para crear componentes reutilizables, como diálogos, modales, pestañas y similares.

Aquí hay un ejemplo en el que quiero crear una ventana emergente con contenido personalizable, y me gustaría «pasar» ese contenido a la ventana emergente de la siguiente manera:

<app-popup-window ="showPopup" title="Test pop-up"> This is the content of the pop-up (thanks to transclusion aka content projection)</app-popup-window>

Tenga en cuenta que también estoy pasando un título como entrada a ese componente. Ahora, de forma predeterminada, el código anterior no proyectaría el contenido. Para hacer posible la proyección de contenido, necesitamos agregar la directiva ng-content en algún lugar de la plantilla del componente secundario:

<div class="modalW-content">
<div class="modalW-header">
<h2>{{title}}</h2>
</div>
<div class="modalW-body">
<!-- Our content will be projected here -->
<ng-content></ng-content>
</div>
</div>

ng-content funciona de forma muy similar a la salida de enrutador: Es una directiva que indica dónde se cargará el contenido dinámico.

Otra forma de envolver su cabeza alrededor de la proyección de contenido es que básicamente va a «cortar y pegar» el HTML generado desde el componente padre en la plantilla HTML del componente hijo y ese HTML se va a «pegar» donde se encuentra ng-content.

Una vez que tengamos el código anterior en su lugar, la ventana emergente se renderiza de la siguiente manera:

Usted puede encontrar el código completo de este ejemplo en este Stackblitz:

Puede que este proyecto de contenido dinámico?

¡Por supuesto que puede! Puede usar cualquier enlace de datos, directiva o incluso otros componentes si lo desea.

he Aquí un ejemplo:

<app-popup-window ="showPopup" title="Test pop-up">
This is the content of the pop-up.
{{customText}} <br>
I can even pass a child component: <br>
<app-hello></app-hello>
</app-popup-window>

Y todo esto funciona perfectamente bien:

El código completo para este segundo ejemplo se puede encontrar en este Stackblitz:

¿Qué pasa si quiero proyecto varias cosas en diferentes lugares?

Me alegra que preguntaras. Esto se llama proyección de contenido de múltiples ranuras.

Supongamos que queremos cambiar nuestra ventana emergente para que podamos pasarle un cuerpo personalizado y un pie de página personalizado.

Vamos a usar dos directivas de contenido ng en ese componente, y la clave es hacer que esas dos ranuras seleccionen una porción específica del contenido proyectado utilizando la siguiente sintaxis:

<div class="modalW-body">
<ng-content select="body"></ng-content>
</div><div class="modalW-footer">
<ng-content select="footer"></ng-content>
</div>

Ahora para pasar contenido a estas ranuras específicas, todo lo que tengo que hacer es usar etiquetas que coincidan con los criterios de selección proporcionados anteriormente:

<app-popup-window ="showPopup" title="Test pop-up">
<body>
This is the body of the pop-up.
</body>
<footer>
<button (click)="showPopup = false">Close</button>
</footer>
</app-popup-window>

Tenga en cuenta que utilicé cuerpo y pie de página porque son elementos HTML reales que tienen sentido en ese contexto. Sin embargo, puede seleccionar elementos por clase CSS, nombre de atributo o lo que desee. No hay necesidad de hacerlo exactamente como lo hice aquí.

Como puede ver, funciona muy bien:

he aplicado un color diferente para el pie de página podemos ver que el contenido fue transcluded en la ranura derecha

El código completo de este último ejemplo se puede encontrar en este Stackblitz:

Mi nombre es Alain Chautard. Soy Experto en Desarrollo de Google en Angular, así como consultor fundador y formador en Angular Training, donde ayudo a los equipos de desarrollo a aprender y dominar Angular.

¿Necesita ayuda con Angular? Programemos algo de tiempo para hablar.

Si te ha gustado este post, por favor aplaude o compártelo. Su ayuda siempre es apreciada.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.