Render content between the component tags

Question

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?

Answer 1

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