Componentsintermediate
Content Projection with ng-content
Explain how ng-content lets a parent inject markup into a child component's template.
Content projection solves a problem that plain @Input() bindings can't: sometimes a parent needs to pass a chunk of arbitrary markup — not just a string or number — into a child component and have the child render it in a specific spot within its own template. Angular calls this pattern content projection, and ng-content is the placeholder that marks where the projected content should appear.
It's like a picture frame with a designated opening — you can slide in any photo you like, and the frame doesn't care what's in the picture, it just knows exactly where the picture goes.
Key Concepts
1
This maps directly to the native <slot> element in Web Components, and interviewers like this topic because it tests whether you understand composition versus configuration: instead of a CardComponent exposing ten @Input() properties for every possible piece of text, it can expose a single projection slot and let the parent supply whatever markup it wants — including other Angular components with their own bindings and event handlers.
<slot>CardComponent@Input()
2
A subtlety worth mentioning is that projected content is compiled in the context of the parent component, not the child. This means bindings inside the projected template resolve against the parent's class properties, which is often a source of confusion until you internalize that content projection is purely a rendering-location mechanism, not a data-passing mechanism.
3
Angular also lets you check whether content was actually projected using @ContentChild/@ContentChildren, which pairs naturally with ng-content when a component needs to conditionally render wrapper markup only if content exists.
@ContentChild@ContentChildrenng-content