Angular › Content Projection (ng-content)

What is content projection in Angular and what does ng-content do?

Beginner

Answer

Content projection lets a component accept and display content passed in by whatever uses it, similar to how a picture frame can hold any picture you place inside it. You add an ng-content tag in your component's template to mark exactly where that passed in content should appear.

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

// Used as:
// <app-card><p>This content gets projected inside</p></app-card>

Real-world example A design team builds one reusable Card component, then uses it to display a product, a blog post, and a user profile, simply by passing different content inside it each time.

Common follow-ups: What happens if a component using ng-content is given no content at all?;Can you provide fallback content to show when nothing is projected?

Components & Templates;Standalone Components