Reusable Components with ng-content

Snippet

Reusable Components with ng-content

The <ng-content> tag acts as a placeholder for external content, allowing you to project HTML from a parent component into a child component.

snippet.js
javascript
<!-- card.component.html -->
<div class="card">
  <div class="card-header">Title</div>
  <div class="card-body">
    <ng-content></ng-content>
  </div>
</div>

angular

Breakdown

<ng-content></ng-content>

Specifies where the projected content from the parent should be placed.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Reusable Components with ng-content

Related