`<ng-content>`

Projects parent-supplied content into a component template (slots).

Since Angular 2+ Spec ↗

Syntax

<ng-content select="selector"></ng-content>

Parameters

Name	Type	Required	Description
`select`	`string`	No	Optional CSS selector to project only matching content.

Returns

projection slot — Renders content passed between the component tags.

Examples

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

// usage
// <app-card>
//   <h2 card-title>Title</h2>
//   <p>Body content</p>
// </app-card>

Notes

`<ng-content>` defines a projection slot for content the parent places between the component's tags. Use `select` for named/multi-slot projection; an unselected `<ng-content>` catches the rest. Projected content keeps the parent's injection context.