Projecting Content into Components with ng-content in Angular

Content projection is a pattern in which you insert, or project, the content you want to use inside another component. For example, you could have a Card component that accepts content provided by another component.

Single-slot content projection

server.component.html

<h2>Title</h2>
<p>
  <ng-content></ng-content>
</p>

app.component.html

<app-server>
  <p><i>Hello World</i></p>
</app-server>

Multi-slot content projection

import { Component } from '@angular/core';

@Component({
  selector: 'app-zippy-multislot',
  template: `
    <h2>Multi-slot content projection</h2>

    Default:
    <ng-content></ng-content>

    Question:
    <ng-content select="[question]"></ng-content>
  `
})
export class ZippyMultislotComponent {}

<app-zippy-multislot>
  <p question>
    Is content projection cool?
  </p>
  <p>Let's learn about content projection!</p>
</app-zippy-multislot>

References
https://github.com/mhdr/AngularSamples/tree/master/015/my-app
https://blog.angular-university.io/angular-ng-content/
https://angular.io/guide/content-projection

Related