Admin

03-22-2026, 06:32 AM #1

Content projection lets you create flexible and reusable components in Angular.

Basic ng-content:
Use ng-content to project content from parent to child component. This is similar to slots in other frameworks.

Multi-slot projection:
Use select attribute to project content to specific slots:
<ng-content select="[header]"></ng-content>
<ng-content select="[body]"></ng-content>
<ng-content select="[footer]"></ng-content>

ng-template:
- Define template blocks that can be rendered conditionally
- Use with ngTemplateOutlet for dynamic content
- Great for creating configurable components

ng-container:
- Grouping element that doesn't render to DOM
- Perfect for structural directives without extra DOM elements
- Use with ngTemplateOutlet for template rendering

Real-world use cases:
- Card components with customizable header/body/footer
- Modal dialogs with configurable content
- Table components with custom cell templates
- Accordion panels with dynamic content

Content projection is essential for building component libraries. How do you use it?

indian

03-25-2026, 01:30 PM #2

Content projection is one of Angular's most powerful patterns for building reusable component libraries. Multi-slot projection with select attributes gives you fine-grained control over where content gets rendered. Combined with ng-template and ngTemplateOutlet, you can build incredibly flexible components that adapt to different use cases while maintaining clean separation of concerns.