64. Content Projection (ngContent)

Content Projection (or transclusion) allows you to insert external content, supplied by a parent component, directly into the template of a child component. This is essential for creating flexible, reusable container components (like modals, cards, or panels).

The <ng-content> Tag

This tag marks the location in the child component's template where the content passed by the parent should be displayed.

1. Child Component (card.component.html)

html

2. Parent Component Usage

html

Multi-Slot Content Projection

We can specify where different pieces of projected content should go using the select attribute on <ng-content>. This allows the parent to provide multiple distinct blocks of content.

Child Component (multi-card.component.html)

html

Parent Component Usage

html

Project Title

Last updated 5 mins ago.