When a component is rendered, content inside it is ignored, for example:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<div>{{title}}</div>',
})
export class AppComponent {
title = 'app works!';
}
Using it like:
<app-root>Ignored content</app-root>
Renders:
<div>app works!</div>
But looking at PrimeNg dialog, they use components like this:
<p-dialog [(visible)]="display">
<p-header>
Header content here
</p-header>
Content
<p-footer>
Footer content here
</p-footer>
</p-dialog>
As Header content here
, Content
and Footer content here
are inside the component, why are not they getting ignored and how can I achieve this?
Add <ng-content></ng-content>
to the component's template where the content should be projected:
@Component({
selector: 'app-demo',
template: '<div>{{title}}</div>
<br>
<ng-content></ng-content>',
})
export class DemoComponent {
title = 'Works!';
}
Content to be projected:
<app-demo>This is projected content!</app-demo>
The output will be:
Works!
This is projected content!
Here is a great article about Angular Content Projection (Angular 1 Transclusion): Transclusion in Angular 2 with ng-content