Multi-Slot Projection with select
Project content into named slots.
Multiple Slots
Many components need several regions: a header, a body, a footer. Angular supports this with multi-slot projection using the select attribute on <ng-content>.
The select Attribute
select takes a CSS selector. Each <ng-content select="..."> only projects nodes matching that selector.
<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>All lessons in this course
- Single-Slot Content Projection
- Multi-Slot Projection with select
- ng-template and ng-container
- TemplateRef and ViewContainerRef