Content Projection in Angular: What It Is and How It Works

Content projection in Angular is a technique that lets you insert external content into a component's template using the <ng-content> tag. It allows components to be more flexible by displaying content passed from their parent components.

How It Works

Content projection works like a window in a component where you can place any content from outside. Imagine you have a picture frame (the component) and you want to put different photos (content) inside it without changing the frame itself. The <ng-content> tag acts as that window.

When Angular renders the component, it replaces the <ng-content> tag with whatever content you put between the component's tags in the parent template. This way, the component controls the layout and style, but the actual content can come from outside, making the component reusable and adaptable.

Example

This example shows a simple card component that uses content projection to display any content inside it.

typescript

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

@Component({
  selector: 'app-card',
  template: `
    <div style="border: 2px solid #007bff; padding: 1rem; border-radius: 8px; max-width: 300px;">
      <h3>Card Header</h3>
      <ng-content></ng-content>
      <footer style="margin-top: 1rem; font-size: 0.8rem; color: gray;">Card Footer</footer>
    </div>
  `
})
export class CardComponent {}

@Component({
  selector: 'app-root',
  template: `
    <app-card>
      <p>This is some projected content inside the card.</p>
      <button (click)="alert('Clicked!')">Click Me</button>
    </app-card>
  `
})
export class AppComponent {}

Output

A styled card with header 'Card Header', inside it a paragraph 'This is some projected content inside the card.' and a button labeled 'Click Me'. Below is a footer 'Card Footer'. Clicking the button shows an alert 'Clicked!'.

When to Use

Use content projection when you want to create reusable components that can display different content without changing their internal structure. For example, a modal dialog, a card, or a tab component can use content projection to show custom content inside them.

This helps keep your components flexible and clean, separating layout from content. It is especially useful when building UI libraries or shared components that need to adapt to various content types.

Key Points

• Content projection uses the <ng-content> tag to insert external content.
• It allows components to be flexible and reusable by separating layout from content.
• You can project any HTML or Angular template inside a component.
• Multiple <ng-content> tags can be used with selectors for advanced projection.
• It helps keep your code clean and maintainable by avoiding hardcoded content.

Key Takeaways

Content projection lets you insert external content into a component using .

It makes components flexible by separating their layout from the content they display.

Use it to build reusable UI components like cards, modals, and tabs.

You can project any HTML or Angular template inside a component.

Advanced content projection supports multiple slots with selectors.