What is Content projection (ng-content) in Angular?

Content projection lets a component render markup supplied by its parent through , the key to reusable shells like cards, dialogs and layout components. Multi-slot projection uses select to route proj

All Angular topics

6 / 18

Templates

Content projection (ng-content)

Building flexible, reusable components with slotted content.

intermediate Experienced

Content projection lets a component render markup supplied by its parent through <ng-content>, the key to reusable shells like cards, dialogs and layout components.

Content projection is a picture frame: the frame (shell component) is reusable, and you slot in whatever photo (content) you like.

Key concepts

Multi-slot projection uses select to route projected nodes into named slots by CSS selector, so a card can have distinct header, body and footer regions.

Multi-slot projectionselect

Projected content is a child of the parent component, not the shell — it keeps the parent’s injector and change-detection context, which matters when the projected content injects services.

parent

Best practice: favour projection over a dozen @Input() template flags; it keeps components open for extension. Interview angle: contrast ng-content (projection, no re-instantiation) with *ngTemplateOutlet (explicit template rendering with context).

Best practice:Interview angle:@Input()ng-content*ngTemplateOutlet

typescript

@Component({
  selector: 'app-card',
  standalone: true,
  template: `
    <div class="card">
      <header><ng-content select="[card-title]"></ng-content></header>
      <section><ng-content></ng-content></section>
    </div>
  `,
})
export class CardComponent {}

// usage
// <app-card><h2 card-title>Report</h2><p>Body…</p></app-card>