How to Use ng-content in Angular: Simple Content Projection

Use ng-content in an Angular component's template to create a placeholder where external content can be inserted. This technique, called content projection, lets you pass HTML or components from a parent to a child component dynamically.

Syntax

The ng-content tag acts as a placeholder inside a component's template. When you use this component, any content placed between its tags in the parent template will appear where ng-content is.

You can also use select attributes on ng-content to project specific parts of content into different spots.

html

<!-- Inside child.component.html -->
<div class="wrapper">
  <ng-content></ng-content>
</div>

Example

This example shows a CardComponent that uses ng-content to display any content passed from its parent. The parent component wraps some text and a button inside the card tags, and they appear inside the card's styled box.

typescript/html/css

// card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css']
})
export class CardComponent {}

// card.component.html
<div class="card">
  <ng-content></ng-content>
</div>

// card.component.css
.card {
  border: 2px solid #007bff;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 300px;
  margin: 1rem auto;
}

// app.component.html (parent)
<app-card>
  <h2>Welcome!</h2>
  <p>This content is projected inside the card.</p>
  <button>Click me</button>
</app-card>

Output

A blue bordered box with a heading 'Welcome!', a paragraph, and a button inside it.

Common Pitfalls

• Forgetting to place content between the component tags in the parent will result in empty projection.
• Using multiple ng-content without select attributes can cause all content to appear only in the first ng-content.
• Trying to bind data inside ng-content won't work because it projects static content from the parent.

html

<!-- Wrong: multiple ng-content without select -->
<div>
  <ng-content></ng-content>
  <ng-content></ng-content>
</div>

<!-- Right: use select to target content -->
<div>
  <ng-content select="header"></ng-content>
  <ng-content select="footer"></ng-content>
</div>

<!-- Parent usage -->
<app-comp>
  <header>Header content</header>
  <footer>Footer content</footer>
</app-comp>

Quick Reference

• <ng-content>: Basic placeholder for projected content.
• select attribute: Filters which content goes where, e.g., <ng-content select=".title"></ng-content>.
• Content projection is one-way: parent content appears inside child, but child cannot modify it.
• Use multiple ng-content with select for complex layouts.

Key Takeaways

Use ng-content to insert external content inside a component's template.

Multiple ng-content tags require select attributes to project specific content.

Content projection passes static content from parent to child; it does not support data binding inside projected content.

Always place content between component tags in the parent to see it projected.

Use ng-content to build flexible, reusable components that accept custom content.