Types of Content Projection
1. Single Slot Content Projection
Single Slot Content Projection is the most basic form of content projection, where a single piece of content is projected into the child component’s template.
Generate a new component for single slot content projection:
ng generate component single-slot
Example: In this example there is implementation of single slot component.
<!-- single-slot.component.html -->
<div>
<h2>Single Slot Content Projection</h2>
<ng-content></ng-content>
</div>
<!-- app.component.html -->
<app-single-slot>
<p>This content will be projected into the single-slot component.</p>
</app-single-slot>
Output:
2. Multi-Slot Content Projection
Multi-slot content projection, also known as named content projection, is an advanced technique in Angular for passing content from a parent component into a child component through multiple placeholders within the child component’s template.
Generate a new component for multi-slot content projection:
ng generate component multi-slot
Folder Structure:
Example:
<!-- multi-slot.component.html -->
<div>
<h2>Multi-Slot Content Projection</h2>
<div>
<ng-content select="[header]"></ng-content>
</div>
<div>
<ng-content select="[content]"></ng-content>
</div>
<div>
<ng-content select="[footer]"></ng-content>
</div>
</div>
<!-- app.component.html -->
<app-multi-slot>
<div header>Header Content</div>
<div content>Main Content</div>
<div footer>Footer Content</div>
</app-multi-slot>
Output:
3. Conditional Content Projection
Components that use conditional content projection render content only when specific conditions are met. This technique allows for dynamic rendering of content within a component, providing flexibility and customization options. Conditional content projection can be achieved using Angular’s built-in directives, such as ngIf
, combined with content projection mechanisms.
Generate a new component for conditional content projection:
ng generate component conditional-content
Folder Structure:
Example:
<!-- app.component.html -->
<app-conditional-content>
<div true-content>This content will be displayed when showContent is true.</div>
<div false-content>This content will be displayed when showContent is false.</div>
</app-conditional-content>
<!-- conditional-content.component.html -->
<div>
<h2>Conditional Content Projection</h2>
<ng-container *ngIf="showContent; else elseBlock">
<ng-content select="[true-content]"></ng-content>
</ng-container>
<ng-template #elseBlock>
<ng-content select="[false-content]"></ng-content>
</ng-template>
</div>
// conditional-content.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-conditional-content',
templateUrl: './conditional-content.component.html',
styleUrls: ['./conditional-content.component.css']
})
export class ConditionalContentComponent {
showContent = true;
}
Output:
Content Projection in Angular
Content Projection, also known as “Transclusion” in Angular, is a powerful feature that allows you to pass content from a parent component to a child component. This technique enhances the reusability and flexibility of your components by separating the concerns of content and presentation.