Angular Content Projection
Duration : 00:02:15
Content Projection
Content projection in Angular allows you to pass and project content from a parent component into a child component's template. This mechanism enhances reusability and flexibility by letting you inject dynamic content into predefined slots.Example
<!-- Parent Component Template -->
<app-child>
<h2>Title</h2>
<p>Content to project</p>
</app-child>
Single-Slot Content Projection
Single-slot content projection allows you to project content into a single designated slot within a child component. This is useful for scenarios where you have a single, well-defined area for content injection.Example
<!-- Child Component Template -->
<div class="container">
<ng-content></ng-content>
</div>
Multi-Slot Content Projection
Multi-slot content projection enables you to define multiple slots within a child component, allowing you to project different pieces of content into separate slots based on your needs.Example
<!-- Child Component Template -->
<div class="header">
<ng-content select=".header-slot"></ng-content>
</div>
<div class="content">
<ng-content select=".content-slot"></ng-content>
</div>
Conditional Content Projection
With conditional content projection, you can use Angular's structural directives like ngIf to conditionally project content into a child component, making it dynamic and responsive to specific conditions.Example
<!-- Parent Component Template -->
<app-child>
<ng-template let-showContent [ngIf]="showContent">
<p>Conditional content to project</p>
</ng-template>
</app-child>
Projecting Content in More Complex Environments
In more complex scenarios, you can combine content projection with Angular's component hierarchy to create reusable and versatile components. This technique is particularly valuable when building libraries or frameworks.Example
<!-- Parent Component Template -->
<app-accordion>
<app-accordion-item>
<h3 slot="header">Section 1</h3>
<p slot="content">Content for section 1</p>
</app-accordion-item>
<app-accordion-item>
<h3 slot="header">Section 2</h3>
<p slot="content">Content for section 2</p>
</app-accordion-item>
</app-accordion>
Still have some questions? Let's discuss.
CONTACT US