Rendre le contenu entre les balises du composant

Question

Lorsqu'un composant est rendu, le contenu qu'il contient est ignoré, par exemple:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>',
})
export class AppComponent {
  title = 'app works!';
}

En l'utilisant comme:

<app-root>Ignored content</app-root>

Renders:

<div>app works!</div>

Mais en regardant la boîte de dialogue PrimeNg, ils utilisent des composants comme celui-ci:

<p-dialog [(visible)]="display">
    <p-header>
        Header content here
    </p-header>
    Content
    <p-footer>
        Footer content here
   </p-footer>
</p-dialog>

Comme Header content here, Content et Footer content here sont dans le composant, pourquoi ne sont-ils pas ignorés et comment puis-je y parvenir?

Answer 1

Ajouter <ng-content></ng-content> au modèle du composant où le contenu doit être projeté:

@Component({
  selector: 'app-root',
  template: '<div>{{title}}</div>
             <br>
             <ng-content></ng-content>',
})
export class AppComponent {
  title = 'app works!';
}

Contenu à projeter:

<app-root>This is projected content!</app-root>

La sortie sera:

app works!
This is projected content!

Voici un excellent article sur Angular Projection de contenu (Angular 1 Transclusion)): Transclusion in Angular 2 avec ng-content