Content Projection

En la entrada de hoy vamos a ver que es y como se usa Content Projection en Angular.

Angular tiene un tag que se llama <ng-content>

Este tag puede servir por ejemplo para crear contenido dinámico dependiendo del componente que queramos. Sería similar a un "placeholder" que en algún momento dado tendrá contenido.

Vamos a entenderlo más fácilmente con un ejemplo.

Tenemos un componente muy sencillo (header.component) que únicamente muestra un título.
El código sería algo así como:

import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent  {
  title = 'Título del componente';
}

Y en el template únicamente interpolamos el título a mostrar:

<h2>{{title}}</h2>

Usamos este componente en el componente principal (app.component.ts)

Ahora bien, imaginemos que ese componente lo queremos usar en varios sitios de nuestra aplicación o incluso en varios sitios dentro de nuestro componente principal, pero cambiando el contenido (título a mostrar) dentro de cada uno de ellos.

Para hacer esto, podemos hacer proyección de contenido, colocando contenido dinámico.

En primer lugar dentro de nuestro componente header vamos a reemplazar el título interpolado por el tag <ng-content> que nos va a servir para hacer content-projection

Ahora, a la hora de usar el componente header, podemos proyectar el contenido de la siguiente manera:

Y el resultado quedaría algo así:

Ahora imaginemos que además de mostrar el título de manera dinámica queremos mostrar también un subtítulo.
Para eso añadimos otro ng-content dentro del componente header.
Cuando tenemos más de un "placeholder" dentro de un componente se conoce con el nombre de slots

Para identificar lo que queremos colocar en cada slot, podemos usar "selectores" de manera similar a como hacemos con jQuery

Par ello lo indicamos con el atributo "select" de esta forma:



En el ejemplo anterior estamos diciéndole al componente que en el slot1 coloque el contenido que indiquemos en el h2, y que en el slot2 muestre el que indiquemos en el h4. Podriamos usar otros selectores de manera similar a como se hace en jQuery (# para el selector por Id , . para el selector de clase css, etc.)

Únicamente nos queda "proyectar" el contenido, es decir, nuestro título y subtítulo:



El resultado se vería de esta forma...



Como hemos visto es muy fácil usar proyección de contenido y puede resultarnos muy útil en determinadas ocasiones en las que queramos mostrar contenido dinámico dentro de nuestros componentes.

Hasta la próxima entrada!!