Content Projection in Angular

In Angular, content projection is a powerful technique that allows developers to pass content from a parent component into a child component, and display it in a specific location within the child component's template. This mechanism enables component reusability and flexibility, making it an essential concept for building modular applications.

This blog post delves into the concept of content projection, its types, and provides an example to help you understand how to implement it effectively.

What is Content Projection?

Content projection allows you to project or "transclude" external content into a component’s template. It uses the <ng-content> directive, which acts as a placeholder in the child component’s template where the content provided by the parent component will be inserted.

Types of Content Projection

1. Single-Slot Content Projection:
   • The simplest form, where one <ng-content> tag is used in the child component.
2. Multi-Slot Content Projection:
   • Uses the select attribute to project different types of content into different slots.
3. Conditional Content Projection:
   • Employs structural directives like *ngIf to conditionally display projected content.

Example: Single-Slot Content Projection

Let’s start with a basic example to demonstrate single-slot content projection.

Step 1: Create a Child Component

Create a child component that includes an <ng-content> tag in its template.

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

@Component({
  selector: 'app-child',
  template: `
    

      
Child Component
      
    
  `,
  styles: [
    `.child-container { border: 2px solid #007BFF; padding: 10px; margin: 10px; }`
  ]
})
export class ChildComponent {}

Step 2: Use the Child Component in a Parent Component

Pass custom content from the parent component to the child component.

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

@Component({
  selector: 'app-parent',
  template: `
    

      
Parent Component
      
        
This is the projected content!
      
    
  `,
  styles: [
    `.parent-container { border: 2px solid #28A745; padding: 10px; margin: 10px; }`
  ]
})
export class ParentComponent {}

Result

Output will look like this.

Example: Multi-Slot Content Projection

To project multiple slots, use the select attribute in <ng-content> tags.

Step 1: Update the Child Component Template

// child.component.ts
@Component({
  selector: 'app-child',
  template: `
    

      
Child Component
      
      
    
  `,
  styles: [
    `.child-container { border: 2px solid #007BFF; padding: 10px; margin: 10px; }`
  ]
})
export class ChildComponent {}

Step 2: Update the Parent Component Template

// parent.component.ts
@Component({
  selector: 'app-parent',
  template: `
    

      
Parent Component
      
        
This is the header content!
        
This is the body content!
      
    
  `,
  styles: [
    `.parent-container { border: 2px solid #28A745; padding: 10px; margin: 10px; }`
  ]
})
export class ParentComponent {}

Result

The output will display the header and body content in their respective slots within the child component.

Benefits of Content Projection

• Enhances reusability by allowing dynamic content insertion.

• Separates the concerns of structure and content.

• Reduces redundancy by avoiding repeated component code.

Conclusion

Content projection is a fundamental concept in Angular that empowers developers to create reusable and flexible components. By mastering single-slot, multi-slot, and conditional projection, you can build robust and scalable Angular applications. Start experimenting with <ng-content> in your projects to harness its full potential!

Find out more about content projection here.

Happy learning!! 😊