Directives, Pipes & Templates

Angular Content Projection ng-content

Content projection lets a component render markup supplied by its caller, using ng-content as the placeholder. It is Angular’s equivalent of children in React, with support for multiple named slots.

What is Content Projection ng-content in Angular?

Content Projection ng-content example

A card with three slots

HTML

<!-- card.component.html -->
<div class="card">
  <header><ng-content select="[card-title]"></ng-content></header>
  <div class="body"><ng-content></ng-content></div>
  <footer><ng-content select="[card-actions]"></ng-content></footer>
</div>

Filling the slots

HTML

<app-card>
  <h3 card-title>Frontend Intern</h3>
  <p>Six-month paid internship in Pune.</p>
  <button card-actions>Apply</button>
</app-card>

Key points to remember

A bare ng-content catches everything that did not match a named selector.
select accepts CSS selectors: attributes, tags or classes.
Projected content is created in the parent’s context, so it uses the parent’s data and change detection.

Common mistakes with Content Projection ng-content

Two bare ng-content elements — only the first receives content.
Expecting projected content to see the child component’s variables; it belongs to the parent.

Angular Content Projection ng-content— Interview Questions & FAQs

How do I create multiple content slots in an Angular component?+

Use several ng-content elements with different select attributes, then mark the projected elements with matching attributes, classes or tags in the caller’s template.