ng-content for slot-based composition in Angular

Introduction

ng-content lets you insert content from outside a component into specific places inside it. This helps build flexible and reusable components.

You want to create a card component that can show different content inside it.

You need a modal dialog where the title, body, and footer come from outside.

You want to build a reusable layout component that accepts different sections like header and footer.

You want to pass buttons or links into a toolbar component from outside.

You want to separate structure from content so components are easier to maintain.

Syntax

Angular

<ng-content></ng-content>

<!-- For named slots -->
<ng-content select=".slot-name"></ng-content>

The plain <ng-content> tag inserts all content passed inside the component.

Using select attribute lets you create named slots to place specific content in specific spots.

Examples

Inserts all passed content exactly where this tag is placed.

Angular

<ng-content></ng-content>

Inserts content with class header in the first slot and content with class body in the second slot.

Angular

<ng-content select=".header"></ng-content>
<ng-content select=".body"></ng-content>

Inserts all <h1> elements in the first slot and all <p> elements in the second slot.

Angular

<ng-content select="h1"></ng-content>
<ng-content select="p"></ng-content>

Sample Program

This example shows a CardComponent with three slots: header, body, and footer. The AppComponent passes content with matching classes into each slot. The card displays the content in the right places.

Angular

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

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <div class="card-header">
        <ng-content select=".header"></ng-content>
      </div>
      <div class="card-body">
        <ng-content select=".body"></ng-content>
      </div>
      <div class="card-footer">
        <ng-content select=".footer"></ng-content>
      </div>
    </div>
  `,
  styles: [
    `.card { border: 1px solid #ccc; padding: 1rem; border-radius: 0.5rem; max-width: 300px; }
     .card-header { font-weight: bold; margin-bottom: 0.5rem; }
     .card-body { margin-bottom: 0.5rem; }
     .card-footer { font-size: 0.8rem; color: gray; }`
  ]
})
export class CardComponent {}

@Component({
  selector: 'app-root',
  template: `
    <app-card>
      <div class="header">My Card Title</div>
      <div class="body">This is the main content inside the card.</div>
      <div class="footer">Footer info here</div>
    </app-card>
  `
})
export class AppComponent {}

Important Notes

Content inside ng-content is projected from the parent component.

If no matching content is passed for a named slot, that slot stays empty.

You can combine multiple ng-content tags to create complex layouts.

Summary

ng-content lets you insert external content inside your component.

Use select to create named slots for different content parts.

This helps build reusable and flexible components that accept custom content.