Componentsadvanced
Multi-slot Content Projection
Explain how the select attribute on ng-content enables multiple named projection slots in one component.
A single <ng-content> works when there's only one blob of content to project, but real layout components — a Dialog with a header, body, and footer, or a PageLayout with a sidebar and main area — need several independent slots. Angular supports this through the select attribute on ng-content, which routes specific projected elements to specific slots based on a CSS selector match.
It's like a furniture delivery service with labeled drop-off bins at a warehouse — packages tagged "kitchen" go to the kitchen bin, "bedroom" to the bedroom bin, and anything unlabeled goes to a general bin, or gets left on the truck if there isn't one.
Key Concepts
1
The matching happens against the projected elements themselves, using selectors like a tag name (header), an attribute ([card-footer]), or a class (.title). Any content that doesn't match any select attribute falls through to a plain, selector-less <ng-content> if one exists, which acts as the default/catch-all slot — order matters here, so interviewers sometimes probe whether you know unmatched content is silently dropped if no default slot exists.
header[card-footer].titleselect<ng-content>
2
This is a favorite "design a component" interview question because it forces you to think about API ergonomics: do you expose named slots via attributes (<div dialog-footer>) or via structural directives with ng-template and template outlets? Each has trade-offs — attribute-based slots are simpler for static markup, while template-based slots (using ngProjectAs or ng-template references) allow more dynamic composition.
<div dialog-footer>ng-templatengProjectAs
3
A related, more advanced technique is ngProjectAs, which lets an element be projected as if it matched a different selector than its actual tag — useful when the element you want to project doesn't naturally match the slot's selector.
ngProjectAs