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