Content Projection with ng-content (Reusable Layouts)

Content projection lets a component receive HTML content from the outside.

Think: a Card component where you can place any title, text, buttons inside.

Step 1: Create a Card component

import { Component } from '@angular/core';

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

Step 2: Use it with custom content

<app-card>
  <h3>Pricing</h3>
  <p>Starter plan is $9/month.</p>
  <button>Choose Plan</button>
</app-card>

Why it’s powerful

You create consistent UI shells, and you keep flexibility inside.

Next: ViewChild, access template elements when you truly need it.