Content Projection (ng-content)

Relax. We'll talk through this in plain words — no textbook voice.

Content Projection (ng-content) is used to pass content from a parent component into a child component.

typescript

// card.component.ts
@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <div class="card-header">
        <ng-content select="[header]"></ng-content>
      </div>
      <div class="card-body">
        <ng-content></ng-content>
      </div>
      <div class="card-footer">
        <ng-content select="[footer]"></ng-content>
      </div>
    </div>
  `
})
export class CardComponent { }

// Usage in parent
<app-card>
  <h2 header>Card Title</h2>
  <p>This is the main content of the card.</p>
  <button footer>Action</button>
</app-card>

You should see

(The content passed from the parent will show up in the card component's designated slots)