La content projection in Angular

Abbiamo, finora, visto come in un template sia possibile passare dati e registrare eventi e, dunque, operare a doppio senso nell’alberatura dei componenti. Esiste ancora un utilizzo dei componenti che non abbiamo visto: applicare un contorno, una cornice a una porzione di alberatura che sta sotto di loro, senza però occuparsene direttamente.

Immaginiamo un componente <app-border> che applichi un bordo al suo contenuto, e però si limiti a proiettare all’interno di questo bordo qualsiasi cosa sia rappresentata come figlia del suo tag, dal componente padre:

<app-border>
  <p>Hello world!</p>
</app-border>

Con le sintassi viste fino ad ora, non sarebbe possibile implementare un simile componente. La capacità di un componente di rappresentare il contenuto del suo tag tramite il template del suo componente padre, è chiamata content projection (proiezione del contenuto) e in Angular si fa con il tag ng-content (da non confondere con ng-container).

Creiamo dunque il componente app-border:

ng generate component border

Eliminiamo i file border.component.html e border.component.css e implementiamo direttamente border.component.ts:

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


@Component({
  selector: 'app-border',
  standalone: true,
  imports: [],
  template: '<ng-content />',
  styles: ':host { display: block; border: 1px solid blue; padding: 8px; border-radius: 5px; }'
})
export class BorderComponent { }

Qui abbiamo semplicemente stilizzato il componente usando lo pseudo-selettore :host e come template ci siamo limitati a usare <ng-content />, che rappresenta il contenuto del tag app-border, qualunque esso sia.
Possiamo sfruttare ancora meglio la content projection applicando l’attributo select su ng-content.

Se, ad esempio, oltre al bordo volessimo predisporre lo spazio per un titolo in un template più elaborato, potremmo modificare il template così:

<ng-content select="[title]" /><hr /><ng-content />

A questo punto, in app.component.html, qualunque elemento dentro al tag di app-border corrispondente al selettore [title] verrà mostrato prima del separatore:

<app-border>
  <h2 title>Greetings!</h2>
  <p>Hello world!</p>
</app-border>

Tutto ciò che invece non risponde al selettore, viene semplicemente proiettato al posto del secondo ng-content.