The Ultimate Guide to Content Projection in Angular for Beginner and Advanced Users

Content Projection in Angular is a powerful feature that allows you to pass content into a component from the parent component’s template. This can be incredibly useful for creating reusable components that can be customized with different content based on the specific use case.

In this tutorial, we will discuss the basics of content projection in Angular, as well as some advanced techniques for handling more complex scenarios.

What is Content Projection?

Content projection in Angular is achieved using the <ng-content> tag. This tag acts as a placeholder inside the template of a component, where content from the parent component can be inserted.

Here’s a simple example to illustrate content projection:

// parent.component.html
<app-child>
  <h1>Hello, world!</h1>
</app-child>

// child.component.html
<div>
  <ng-content></ng-content>
</div>

In this example, the app-child component has a <ng-content> tag in its template. When the app-child component is used in the parent.component.html template with the <h1> element inside, the content of the <h1> element will be projected into the <ng-content> tag in the child.component.html template.

Basic Usage of Content Projection

Let’s dive into the basic usage of content projection in Angular.

1. Create a new component using Angular CLI:

ng generate component my-component

1. Update the template of the my-component component (my-component.component.html) to include an <ng-content> tag:

<div>
  <ng-content></ng-content>
</div>

1. Use the my-component component in the parent component’s template (app.component.html):

<app-my-component>
  <h1>Hello, world!</h1>
</app-my-component>

In this example, the content within the <h1> element in app.component.html will be projected into the <ng-content> tag in my-component.component.html.

Handling Multiple Content Projections

You can use multiple <ng-content> tags in a component to handle different types of content projection. Here’s an example:

// my-component.component.html
<div>
  <ng-content select="header"></ng-content>
  <ng-content select="main"></ng-content>
</div>

// app.component.html
<app-my-component>
  <header><h1>Hello, world!</h1></header>
  <main><p>Lorem ipsum dolor sit amet.</p></main>
</app-my-component>

In this example, the content within the <header> and <main> elements in app.component.html will be projected into the <ng-content> tags with the corresponding select attribute in my-component.component.html.

Advanced Techniques

Content projection can be used in more complex scenarios to enable behavior like transclusion, slot-based content, and dynamic content projection.

1. Transclude content with a default template:

// my-component.component.html
<div>
  <ng-content></ng-content>
  <ng-template #defaultContent>
    <p>Default content goes here.</p>
  </ng-template>
</div>

1. Use the ng-template tag for slot-based content projection:

// my-component.component.html
<div>
  <ng-container *ngTemplateOutlet="contentTemplate || defaultContent"></ng-container>
  <ng-template #defaultContent>
    <p>Default content goes here.</p>
  </ng-template>
</div>

1. Use @ContentChild or @ContentChildren decorators to access projected content programmatically in the component class.

// my-component.component.ts
import { ContentChild } from '@angular/core';

export class MyComponent {
  @ContentChild('header') header: ElementRef;
}

Conclusion

Content projection is a powerful feature in Angular that allows you to pass content into a component from the parent component’s template. By mastering content projection, you can create more flexible and reusable components that can be customized with different content for various use cases. I hope this tutorial has provided you with a solid understanding of content projection in Angular and how to leverage it effectively in your applications.