Angular Content Projection with ng-content
ng-content creates a "slot" in a component's template, letting you project parent content into it. Use this for reusable wrappers like cards or dialogs. The key footgun: never use @if on ng-content, as the content is always rendered, even if hidden.
ng-content creates a "slot" in a component's template, allowing you to project parent content directly into its view. It's Angular's version of the native <slot> element, perfect for reusable wrappers like cards or dialogs. You can define multiple slots using the `select` attribute with a CSS selector. The main footgun: never use @if on ng-content. The projected content is always rendered, even if the slot is hidden, leading to unnecessary DOM nodes and performance costs.
Read the original → angular.dev
- #angular
- #components
- #content projection
- #ng-content
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.