La projection de contenu (<ng-content>)

La projection de contenu est une syntaxe qu’on peut utiliser dans un template de composant Angular et qui permet de réafficher le contenu situé entre les balises d’un composant.

Fonctionnement d’un composant sans projection de contenu

Prenons l’exemple d’un composant standard (qui n’utilise pas la projection).

@Component({
  selector: 'meteo',
  template: '<p>Le temps est ensoleillé.</p>'
})
export class MeteoComponent {}

Quand ce composant est affiché, si on place du texte ou du HTML entre ses balises, ce dernier sera écrasé par le template du composant lors de la compilation.

Avant compilation (notez le texte placé entre les balises <meteo>...</meteo>) :

<meteo>
  <p>Salut, toi !</p>
</meteo>

Après compilation :

<meteo>
  <p>Le temps est ensoleillé.</p>
</meteo>

Le texte <p>Salut, toi !</p> a été remplacé par le template du composant MeteoComponent, c’est-à-dire par <p>Le temps est ensoleillé.</p>.

Fonctionnement d’un composant qui utilise la projection de contenu

La projection de contenu permet à un composant de réafficher le texte contenu entre ses balises dans son propre template, grâce à la balise <ng-content></ng-content>.

@Component({
  selector: 'meteo',
  template: `
    <p>Le temps est ensoleillé.</p>
    <ng-content></ng-content>. <!-- Cette balise va permettre la projection de contenu. -->
  `
})
export class MeteoComponent {}

Grâce à <ng-content></ng-content>, on obtient pas le même résultat que dans l’exemple précédent.

Avant compilation (même point de départ que précédemment) :

<meteo>
  <p>Salut, toi !</p>
</meteo>

Après compilation :

<meteo>
  <p>Le temps est ensoleillé.</p>
  <p>Salut, toi !</p>
</meteo>

Cette fois-ci, le HTML contenu entre les balises <meteo>...</meteo> a été préservé par Angular et réaffiché dans le template de MeteoComponent à l’emplacement de la balise <ng-content></ng-content>.

Imbrication de composants grâce à la projection

La projection de contenu permet donc d’imbriquer des composants (enfants) dans un autre (parent).

Par exemple :

<my-nav>
  <menu></menu>
  <login-button></login-button>
<my-nav>

On dit que les composants <menu> et <login-button> sont des enfants “ContentChild” de <my-nav>. Voir #45 Comprendre la différence entre ViewChild et ContentChild (composant parent-enfant) pour plus d’informations.

Informations

Tags : componentstemplates

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne