Angular Content Projection with ng-content

At the heart of ng slots lies the <ng-content> tag. When Angular encounters this tag in a component’s template, it acts as a placeholder. During rendering, Angular projects the content provided by the parent component into this placeholder.

Consider a simple scenario:

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

@Component({
 selector: 'app-card',
 template: `
 <div class="card">
 <h3>Card Title</h3>
 <div class="card-body">
 <ng-content></ng-content>
 </div>
 </div>
 `,
 styles: [`
 .card { border: 1px solid #ccc; padding: 10px; margin: 10px; border-radius: 5px; }
 .card-body { padding-top: 5px; }
 `]})
export class CardComponent {}

And then in a parent component:

<app-card>
<p>This content is projected into the card body.</p>
<ul>
<li>Item 1</li>

<li>Item 2</li>
</ul>
</app-card>

The <p> and <ul> tags from the parent component are “slotted” into the <ng-content> area of the app-card component.

Why Use Ng Slots?

• Reusability: Build generic container components (e.g., cards, modals, layout panels) that can host diverse content.
• Flexibility: Components become more adaptable, allowing their structure to be defined by the parent, rather than being hardcoded.
• Decoupling: Parent components define what content goes where, while child components define the structural layout. This separation of concerns improves maintainability.
• Clearer Templates: Parent templates can be cleaner, focusing on the content and its overall structure, delegating layout details to child components.

Types of Content Projection

Single Slot Projection

This is the basic form, as shown above, where all projected content goes into a single <ng-content> tag. If multiple <ng-content> tags are present without a select attribute, only the first one will receive the projected content.

Multi-Slot (Named Slot) Projection

To project different pieces of content into specific areas of a child component, Angular provides the select attribute on <ng-content>. This allows you to define “named slots.”

You can select content based on:

• Element Selector: select="header"
• Attribute Selector: select="[footer]" or select="[my-attribute='value']"
• Class Selector: select=".card-title"

Example with named slots:

// custom-card.component.ts
@Component({
 selector: 'app-custom-card',
 template: `
 <div class="custom-card">
 <div class="card-header">
 <ng-content select="header"></ng-content>
 </div>
 <div class="card-body">
 <ng-content></ng-content> <!-- Default slot for content not matching other selectors -->
 </div>
 <div class="card-footer">
 <ng-content select="[footer]"></ng-content>
 </div>
 </div>
 `
})
export class CustomCardComponent {}

Parent usage:

<app-custom-card>
<header><h2>My Awesome Card</h2></header>
<p>This is the main body content.</p>
<div footer>
<button>Action</button>
</div>
</app-custom-card>

Content not matching any select attribute will be projected into the <ng-content> without a select attribute (the default slot).

Conditional Content Projection with and ngTemplateOutlet

This pattern involves:

1. The parent component defines an <ng-template>.
2. The parent passes a reference to this template to the child component using @Input.
3. The child component uses *ngTemplateOutlet to render the projected template.

Example:

// list-presenter.component.ts
import { Component, Input, TemplateRef } from '@angular/core';

@Component({
 selector: 'app-list-presenter',
 template: `
 <h3>Items:</h3>
 <ul>
 <li ngFor="let item of items">
 <ng-container ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}">
 </ng-container>
 </li>
 </ul>
 `
})
export class ListPresenterComponent {
 @Input items: any[] = [];
 @Input itemTemplate!: TemplateRef<any>;
}

Parent usage:

<app-list-presenter [items]=”[‘Apple’, ‘Banana’, ‘Cherry’]”>
<ng-template let-fruit let-i=”index” #myFruitTemplate>
<b>{{ i + 1 }}.</b> {{ fruit }}
</ng-template>
</app-list-presenter>

Here, myFruitTemplate is passed to the itemTemplate input. The ListPresenterComponent then renders this template for each item, providing context variables like $implicit (the item itself) and index.

Best Practices

• Keep it Simple: For straightforward content placement, <ng-content> is usually sufficient.
• Use Named Slots Wisely: Don’t overdo named slots. If a component has too many, it might be a sign that it’s trying to do too much, or that its design needs simplification.
• Provide Fallback Content: You can provide default content for <ng-content> that will be displayed if no content is projected by the parent: <ng-content>Default content here</ng-content>.
• Consider NgTemplateOutlet for Dynamic/Contextual Content: When you need to render content conditionally, repeatedly, or with specific data context from the child component, <ng-template> with *ngTemplateOutlet is the more powerful choice.

Mastering ng slots and content projection is a crucial step towards building highly modular, flexible, and maintainable Angular applications. They empower developers to create sophisticated UI components that seamlessly adapt to varying content requirements.