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 ```ts 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 ```html <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.