example - ng-content angular 6

Renderizar contenido entre las etiquetas de componentes

Question

Cuando se representa un componente, el contenido se ignora, por ejemplo:

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

Usándolo como:

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

Renders:

<div>app works!</div>

Pero viendo el diálogo de PrimeNg, usan componentes como este:

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

Como el Header content here , el Content y el Footer content here están dentro del componente, ¿por qué no se ignoran y cómo puedo lograrlo?

Answer 1

Agregue <ng-content></ng-content> a la plantilla del componente donde se debe proyectar el contenido:

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

Contenido a proyectar:

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

La salida será:

app works!
This is projected content!

Aquí hay un gran artículo sobre Proyección de contenido angular (Transclusión Angular 1): Transclusión en Angular 2 con contenido ng