+- Anna University Plus (https://annauniversityplus.com)
+-- Forum: Front-End JavaScript (https://annauniversityplus.com/Forum-front-end-javascript)
+--- Forum: Angular (https://annauniversityplus.com/Forum-angular)
+--- Thread: Angular Content Projection: Creating Flexible Component APIs (/angular-content-projection-creating-flexible-component-apis)
Angular Content Projection: Creating Flexible Component APIs - Admin - 03-22-2026
Content projection in Angular allows you to insert external content into a component's template, enabling highly reusable and flexible component designs.
Types of content projection:
- Single-slot projection: Project content into a single ng-content slot
- Multi-slot projection: Use select attribute to project content into specific slots
- Conditional projection: Show projected content based on conditions
Single-slot projection:
- Place ng-content in your component template
- Content between component tags is projected into the slot
- Useful for wrapper components like cards, panels, and dialogs
- Default content can be provided as fallback
Multi-slot projection with selectors:
- Use select attribute on ng-content with CSS selectors
- Select by element name, class, attribute, or directive
- Organize complex component layouts with named slots
- Unmatched content goes to ng-content without select
ng-template and ng-container:
- ng-template defines reusable template blocks
- ng-container is a grouping element that doesn't render DOM
- Use ngTemplateOutlet to stamp out templates dynamically
- Pass context data to templates for customization
ContentChild and ContentChildren:
- Query projected content with @ContentChild decorator
- Access multiple projected elements with @ContentChildren
- Use AfterContentInit lifecycle hook for content queries
- QueryList provides observable changes for dynamic content
Common patterns:
- Tab components with projected tab panels
- Accordion with projected sections
- Data table with custom cell templates
- Modal dialogs with projected header, body, and footer
- Layout components with sidebar and main content areas
RE: Angular Content Projection: Creating Flexible Component APIs - indian - 03-22-2026
Great overview of content projection! I find multi-slot projection with the select attribute especially useful when building reusable card or modal components. One tip: combining ng-content with ng-template and ngTemplateOutlet gives even more flexibility, allowing you to pass template references and render them conditionally. This pattern is powerful for building design system components.