Lesson 11 / 30

Content Projection

Let a parent pass markup into a component's template.

<ng-content>

<ng-content> marks a slot inside a component's template where the parent's markup gets projected in.

<!-- card.component.html -->
<div class="card">
  <ng-content></ng-content>
</div>

<!-- usage -->
<app-card>
  <h3>Title</h3>
  <p>Some card body text.</p>
</app-card>

Multiple slots

Add a select attribute to project different pieces of markup into different slots, e.g. <ng-content select="[card-footer]">.