Angular ng-content multiple projection

When working with Angular, you may come across a situation where you need to project multiple content sections into a component using ng-content. In this blog post, we will explore how to achieve multiple projections using ng-content in Angular.

Understanding ng-content

ng-content is an Angular directive that allows you to project content into a component. It acts as a placeholder for content that will be dynamically injected from the parent component.

By default, ng-content projects all the content provided by the parent component. However, there might be scenarios where you want to project different sections of content into different parts of the component template.

Multiple projections using ng-content

To achieve multiple projections, you can make use of the select attribute on ng-content. The select attribute allows you to specify a CSS selector to match the content that should be projected.

Let’s say we have a component called my-component with two content sections: header and body. We want to project different content into each section.

Here’s how you can achieve this:


// my-component.component.html

In the above code snippet, we have two ng-content elements with different select attributes.

Now, let’s see how we can use my-component and project content into the different sections:


// app.component.html

In the above code snippet, we have used the my-component and provided content for the header and body sections using regular HTML elements.

When the above code is rendered, the content provided for the header section will be projected into the header section of my-component, and the content provided for the body section will be projected into the body section of my-component.

Conclusion

In this blog post, we explored how to achieve multiple projections using ng-content in Angular. By using the select attribute on ng-content, we can project different sections of content into different parts of a component.

By leveraging this feature, you can create more flexible and reusable components in your Angular applications.

That’s all for this post! Happy coding!