Content projection (ng-content) memungkinkan komponen menerima konten dari parent — seperti children di React atau slot di Vue/Svelte.

Single Slot

@Component({
  selector: "app-card",
  template: `
    <div class="card">
      <ng-content />
    </div>
  `,
})
export class CardComponent {}

// <app-card><p>Konten card</p></app-card>

Multi-slot

@Component({
  selector: "app-layout",
  template: `
    <header><ng-content select="[header]" /></header>
    <main><ng-content /></main>
    <footer><ng-content select="[footer]" /></footer>
  `,
})

<app-layout>
  <h1 header>Judul</h1>
  <p>Konten utama</p>
  <p footer>Footer</p>
</app-layout>