Angular Content Projection beta

Content projection is a way to import HTML content from outside the component and insert that content into the component's template in a designated spot.

Parent

When the parent component (AppComponent below) uses the <app-content> element in the template, it includes a couple of div elements between the tags.

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-content-projection',
  template: `
    <app-content>
      <div header>
        Header content
      </div>
      <div body>
        Body content
      </div>
    </app-content>
  `
})
export class AppComponent {
}

Child

If the child needs to display the embedded content, it does so using <ng-content>.

content.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-content',
  template: `
      <h1>
        <ng-content select="[header]"></ng-content>
      </h1>
      <p>
        <ng-content select="[body]"></ng-content>
      </p>
  `
})
export class ContentComponent {
}

The select attribute is used to identify an element within the content using a CSS selector.