What is content projection with ng-content?

Question

Accepted Answer

**Content projection** lets a component accept and render **markup passed in by its parent** — placed via ``. It's how you build flexible, reusable wrapper components (cards, dialogs, layouts) whose inner content the consumer controls. (It's Angular's equivalent of Vue/web-component slots and React's `children`.) ## Single-slot projection ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` The card provides the styled wrapper; the parent decides what goes inside — far more flexible than passing strings via `@Input`. ## Multi-slot projection with select ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` The `select` attribute (a CSS selector — attribute, class, or tag) routes each piece of projected content to the right `` slot, enabling multi-region layouts. ## Projected content keeps its original context ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Why it matters Content projection is the key to building **reusable, composable** UI components in Angular — cards, modals, tabs, layouts, and any "shell" where the consumer supplies the inner content. Without it, components would be rigid (only configurable via inputs); with `` (and `select` for multiple slots), they become flexible containers, which is essential for design systems and shared component libraries.