Conditional Content Projection in Angular: What It Is and How to Use It

In Angular, conditional content projection means showing different projected content inside a component based on conditions. It uses ng-template and ngTemplateOutlet to decide which content to display dynamically inside <ng-container> slots.

How It Works

Conditional content projection in Angular works like choosing what to show inside a box depending on some rule. Imagine you have a gift box (component) and you want to put different gifts (content) inside it based on the occasion (condition).

Normally, Angular's <ng-content> lets you insert content from outside into a component. But with conditional projection, you control which content appears by using ng-template and ngTemplateOutlet. This means you can prepare multiple content options and show only the one that fits the current condition.

This approach keeps your component flexible and clean, letting you swap content without changing the component's internal code.

Example

This example shows a CardComponent that projects different content based on a type input. It uses ng-template and ngTemplateOutlet to conditionally display content.

typescript

import { Component, Input, TemplateRef, ContentChild } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <ng-container *ngTemplateOutlet="getTemplate()"></ng-container>
    </div>
  `,
  styles: [`.card { border: 1px solid #ccc; padding: 1rem; border-radius: 0.5rem; max-width: 300px; }`]
})
export class CardComponent {
  @Input() type: 'info' | 'warning' = 'info';

  @ContentChild('infoTemplate', { static: true }) infoTemplate!: TemplateRef<any>;
  @ContentChild('warningTemplate', { static: true }) warningTemplate!: TemplateRef<any>;

  getTemplate(): TemplateRef<any> | null {
    return this.type === 'info' ? this.infoTemplate : this.warningTemplate;
  }
}

// Usage in a parent component template:
// <app-card [type]="currentType">
//   <ng-template #infoTemplate>
//     <p>This is an informational message.</p>
//   </ng-template>
//   <ng-template #warningTemplate>
//     <p><strong>Warning!</strong> Please check your input.</p>
//   </ng-template>
// </app-card>

Output

<div class="card">
  <p>This is an informational message.</p>
</div>

When to Use

Use conditional content projection when you want a component to display different content blocks based on some input or state without duplicating the component. It helps keep your UI flexible and reusable.

For example, you might have a notification component that shows different messages for success, error, or info states. Instead of creating separate components, you can project different templates conditionally.

Another use case is a tab component that projects different tab content based on the selected tab, or a form component that shows different instructions depending on the form mode.

Key Points

• Conditional content projection uses ng-template and ngTemplateOutlet to choose which content to show.
• It allows dynamic swapping of projected content inside a component.
• Helps keep components reusable and clean by avoiding multiple similar components.
• Works well for components that need to display different content based on inputs or state.

Key Takeaways

Conditional content projection lets Angular components display different projected content based on conditions.

Use ng-template and ngTemplateOutlet to implement this dynamic content swapping.

It keeps components flexible and reusable by avoiding duplication.

Ideal for components that need to show varied content depending on inputs or state.