+- 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 with ng-content and ng-template (/angular-content-projection-with-ng-content-and-ng-template)
Angular Content Projection with ng-content and ng-template - Admin - 03-22-2026
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?
RE: Angular Content Projection with ng-content and ng-template - indian - 03-25-2026
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.