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\',
         


        

Answer 1

Add to the component's template where the content should be projected:

@Component({
  selector: 'app-demo',
  template: '
{{title}}
             

             ',
})
export class DemoComponent {
  title = 'Works!';
}

Content to be projected:

This is projected content!

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