Render content between the component tags

Add <ng-content></ng-content> to the component’s template where the content should be projected:

  selector: 'app-demo',
  template: '<div>{{title}}</div>
export class DemoComponent {

Content to be projected:

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

The output will be:

This is projected content!

Here is a great article about Angular Content Projection (Angular 1 Transclusion): Transclusion in Angular 2 with ng-content

Leave a Comment