Simplificación de la proyección de contenido en Angular

La proyección de contenido le permite insertar un DOM de sombra en su componente. En pocas palabras, si desea insertar elementos HTML u otros componentes en un componente, lo hace utilizando el concepto de proyección de contenido. En Angular, se logra la proyección de contenido mediante < ng-content >< /ng-content >. Puede crear componentes reutilizables y aplicaciones escalables mediante el uso correcto de la proyección de contenido.

Para comprender la proyección de contenido, consideremos GreetComponent como se muestra en la lista de código a continuación:

import { Component } from '@angular/core';
 
@Component({
    selector: 'greet',
    template: `{{message}}`
})
export class GreetComponent {
 
    message: string = "Hello There !"
 
}

Ahora, si usas GreetComponent en otro componente, y quieres pasar un mensaje de saludo desde el componente padre, entonces debes usar el decorador @Input(). De esta manera, un GreetComponnet modificado se verá como la lista a continuación:

import { Component, Input } from '@angular/core';
 
@Component({
    selector: 'greet',
    template: `{{message}}`
})
export class GreetComponent {
 
    @Input() message: string;
 
}

Usando el decorador @Input(), puede pasar una cadena simple a GreetComponnet, pero ¿qué pasa si necesita pasar diferentes tipos de datos a GreetComponent, como:

1. Inner HTML
2. HTML Elements
3. HTML con estilo
4. Otro componente, etc.

Para pasar o proyectar HTML con estilo u otro componente, se utiliza la proyección de contenido. Modifiquemos el GreetComponent para usar la proyección de contenido en este código:

Estamos usando para proyectar contenido en el GreetComponent. Al usar GreetComponent, pasará el contenido como se muestra a continuación:

En la lista anterior, está proyectando HTML con estilo en GreetComponent y obtendrá el siguiente resultado:

Este es un ejemplo de proyección de contenido de una sola ranura. Lo que sea que pase a GreetComponent se proyectará. Por lo tanto, pasemos más de un elemento HTML a GreetComponent como se muestra en la lista a continuación:

Aquí estamos pasando tres elementos HTML a GreetComponent, y todos ellos serán proyectados. Obtendrá la salida como se muestra en la imagen a continuación:

En el DOM, puede ver que dentro del GreetComponent, se proyectan todos los elementos HTML.

Proyección multiranura

Es posible que tenga la necesidad de proyectar elementos en varias ranuras del componente. En el siguiente ejemplo, supongamos que quieres crear una tarjeta de felicitación como esta:

Esto se puede crear usando el componente como se muestra a continuación:

Supongamos que tenemos el requisito de pasar el elemento header y un elemento btn para que el nombre y el botón se puedan pasar dinámicamente al GreetComponent.  Esta vez, necesitamos dos ranuras:

1. Una ranura para el elemento de encabezado
2. Una ranura para el elemento btn

Modifiquemos el GreetComponent para satisfacer el requisito anterior, como se muestra en la imagen a continuación:

Aquí estamos usando ng-content dos veces. Ahora, la pregunta es ¿seleccionamos un contenido ng particular para proyectar el elemento h1 y otro contenido ng para proyectar un elemento btn?

Puede seleccionar una ranura concreta para la proyección utilizando el selector ng-content >.  Hay cuatro tipos de selectores:

1. Proyecto mediante selector de etiquetas
2. Proyecto usando el selector de clases
3. Proyecto usando el selector de id
4. Proyecto mediante selector de atributos

Puede utilizar el selector de etiquetas para la proyección de ranuras múltiples, como se muestra en el siguiente listado:

A continuación, puede proyectar contenido en GreetComponent como se muestra en la lista siguiente:

Como puede ver, estamos usando el GreetComponent dos veces y proyectando diferentes elementos h1 y button. Obtendrá el resultado como se muestra en la imagen a continuación:

El problema con el uso de selectores de etiquetas es que todos los elementos h1 se proyectarán en GreetComponent. En muchos escenarios, es posible que no desee eso y puede usar otros selectores, como un selector de clase o un selector de atributos, como se muestra en la lista siguiente:

A continuación, puede proyectar contenido en GreetComponent como se muestra en la lista siguiente:

Obtendrá el mismo resultado que el anterior, sin embargo, esta vez está utilizando el nombre de la clase y el atributo para proyectar el contenido. Cuando inspeccione un elemento en el DOM, encontrará el nombre del atributo y el nombre de la clase del elemento proyectado como se muestra en la imagen a continuación:

La proyección de contenido es muy útil para insertar shadow DOM en sus componentes. Para insertar elementos HTML u otros componentes en un componente, debe utilizar la proyección de contenido. En AngularJS 1.X, la proyección de contenido se logró usando Transclusión, sin embargo, en Angular se logra usando < ng-content>

En el próximo post, conocerás más conceptos importantes en Angular, así que estate atento. Además, no olvide consultar Ignite UI para JavaScript / HTML5 y ASP.NET MVC, que puede usar con HTML5, Angular, React y ASP.NET MVC para crear aplicaciones de Internet enriquecidas. ¡Puede descargar una versión de prueba de todos nuestros controles JavaScript de forma gratuita!