In this blog, you’ll learn about content projection in Angular, a useful method for passing content from a parent component into a child. We’ll cover how to use the <ng-content> element for both single-slot and multi-slot projection, making your components more flexible and reusable.
What is Content Projection
Content projection is a method where you insert content into another component. This approach lets you pass content from a parent component to a child. In Angular, you can do this using the <ng-content> element, which works as a placeholder for the projected content.
Why Content Projection
- Component Reusability: It lets you create a flexible component layout and insert different content, allowing one component to handle multiple tasks without needing to rewrite code.
- Customization: Developers can modify specific parts of a component without changing its core functionality or structure.
- Dynamic Layouts: Content projection enables components to adjust their layout based on the content passed in, like a modal that can display anything from simple text to complex forms.
- Simplified Maintenance: Since the projected content and component layout are separate, it’s easier to update either without affecting the other, reducing the chance of breaking the system.
What is ng-content?
The <ng-content> element is not a component or a regular DOM element. It’s a special placeholder in Angular that specifies where content should be rendered. It allows developers to pass content from a parent component to a child component.
How to use ng-content?
1. Single-slot content projection
The term single-slot content projection refers to the creation of a component into which only one component can be projected. Single-slot content projection refers to creating a component into which you can project one component.
Here’s an example of a component that uses single-slot content projection
// Provinding the content from parent data that gonna be replace <ng-content> in child component.
<custom-card>
<p>This is the projected content</p>
</custom-card>
// Using the "ng-contnet" where we want to render the data which which came from parent component
<div>
<h2>Single-slot content projection</h2>
<ng-content></ng-content>
</div>// Rendered DOM
<custom-card>
<div>
<h2>Single-slot content projection</h2>
<p>This is the projected content</p>
</div>
</custom-card>2. Multi-slot content projection
Multi-slot content projection, or named content projection, lets you pass content from a parent to a child component through multiple placeholders in the child’s template. Each slot uses the select attribute of <ng-content> to determine which content goes into it, offering more flexibility in content injection.
Parent component from where we are passing the content
<app-multi-slot>
<div header>Header Content</div>
<div body>Body Content</div>
<div footer>Footer Content</div>
</app-multi-slot>Child Component where <ng-content> works as a placeholder and renders the content based on the ‘select’ attribute
<div>
<h2>Multi-Slot Content Projection</h2>
<div>
<ng-content select="[header]"></ng-content>
</div>
<div>
<ng-content select="[body]"></ng-content>
</div>
<div>
<ng-content select="[footer]"></ng-content>
</div>
</div>Conclusion
In conclusion, content projection in Angular is a valuable technique that boosts the flexibility and reusability of components. By utilizing the <ng-content> element, developers can easily pass content from parent to child components, enabling dynamic and customizable layouts. Whether using single-slot or multi-slot projection, this method simplifies component management and maintenance, making it essential for building scalable and adaptable Angular applications.
Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency.