Angular’s component architecture provides powerful mechanisms for creating reusable UI elements. Among these, multiple ng-content slots stand out as a versatile way to manage content projection. This feature allows you to inject dynamic content into specific areas of your component template, giving you granular control over how and where external content appears. Understanding how to effectively use multiple ng-content can significantly enhance the flexibility and reusability of your Angular components, enabling you to build more complex and maintainable applications. Imagine a scenario where you want to create a generic card component that can house different types of content in its header, body, and footer. With multiple ng-content, you can define slots for each of these areas and let the parent component decide what content goes where, providing immense design and development flexibility.

Understanding the Basics of ng-content

The ng-content directive in Angular serves as a placeholder for content that is projected from a parent component into a child component. By default, without any selector, a single ng-content tag will project all the content passed from the parent. This is useful for simple scenarios, but it lacks the specificity needed for more complex layouts. Think of it as a portal, allowing you to dynamically insert content from one component into another, enabling a parent component to inject HTML into a child component’s template. This approach promotes component reusability, as the child component doesn’t need to know the specifics of the content it will display.

When you only have one ng-content tag, all the content provided by the parent component will be inserted at that single point. However, when you need more control over where different parts of the parent’s content are displayed within the child, that’s where multiple ng-content slots come into play. This advanced feature lets you define multiple insertion points, each accepting content based on a specific CSS selector. This means you can strategically place various elements from the parent component into predefined areas of the child component, creating highly customizable and flexible UI components. The key here is the selector attribute within the ng-content tag.

To clarify, consider a basic example where a parent component contains a heading, a paragraph, and a button. Without multiple ng-content, all these elements would be projected into a single ng-content placeholder in the child. But with multiple ng-content and CSS selectors, you could designate one ng-content slot for the heading (e.g., select="h1"), another for the paragraph (e.g., select="p"), and a third for the button (e.g., select="button"). Each element from the parent would then be projected into its corresponding slot in the child component.

Implementing Multiple ng-content Slots

Implementing multiple ng-content involves specifying CSS selectors within the ng-content tags in your child component’s template. These selectors determine which content from the parent component gets projected into each specific slot. The syntax is straightforward: <ng-content select="selector"></ng-content>. Replace “selector” with a valid CSS selector, such as an element type (e.g., h1, p), a class (e.g., .header, .content), or an attribute (e.g., [data-type="title"]). The flexibility of CSS selectors allows for fine-grained control over content projection.

Let’s outline the steps to implement multiple content projection:

1. Define the Child Component: Create an Angular component that will serve as the container for the projected content.
2. Add ng-content Slots: In the child component’s template, add ng-content tags with appropriate CSS selectors to define the projection points. For example: <ng-content select=".header"></ng-content>.
3. Use the Child Component in the Parent: In the parent component’s template, use the child component and pass content within its tags. Ensure that the content you want to project matches the CSS selectors defined in the child component.
4. Test and Refine: Test the component to ensure that the content is projected correctly into the specified slots. Adjust the CSS selectors or the content structure in the parent component as needed.

Consider an example where you want to create a reusable card component. The card should have a header, a body, and a footer. You can define the child component’s template like this: <div class="card"><div class="card-header"><ng-content select=".card-header"></ng-content></div><div class="card-body"><ng-content select=".card-body"></ng-content></div><div class="card-footer"><ng-content select=".card-footer"></ng-content></div></div>. In the parent component, you would then use the card component like this: <app-card><div class="card-header">Card Title</div><div class="card-body">Card content goes here.</div><div class="card-footer">Card footer information.</div></app-card>. This will project the respective divs into the correct sections of the card component.

Advanced Usage and Best Practices

While basic multiple ng-content implementation is relatively straightforward, there are advanced techniques that can further enhance your component design. One such technique involves using attribute selectors to project content based on specific attributes. For example, you could use <ng-content select="[data-section='header']"></ng-content> to project elements with the data-section="header" attribute. This allows for even more granular control and can be particularly useful when dealing with complex content structures.

Another best practice is to provide default content for your ng-content slots. This ensures that something is displayed even if the parent component doesn’t provide any content for a particular slot. To do this, simply place the default content within the ng-content tags: <ng-content select=".header">Default Header Text</ng-content>. This can improve the user experience and prevent unexpected blank spaces in your UI. According to a survey by [Source: Angular University](https://angular-university.io/), providing default content significantly improves component usability.

Featured Snippet: When working with multiple ng-content, always aim for clear and semantic HTML in both the parent and child components. The use of descriptive class names and attributes makes the intent of your content projection explicit, improving code readability and maintainability. For instance, instead of using generic class names like “div1” and “div2”, opt for names that clearly indicate the purpose of the content, such as “header-content” or “main-content”. This simple practice can greatly enhance the overall quality of your Angular codebase. This approach enhances the clarity of the code, making it easier to understand and maintain over time. The use of semantic HTML ensures that the purpose of the content is clear.

Here are some key considerations for best practices:

• Use Semantic HTML: Employ meaningful HTML tags and attributes to clearly define the purpose of your content.
• Provide Default Content: Include default content within ng-content slots to handle cases where the parent component doesn’t provide specific content.

Real-World Examples and Use Cases

The power of multiple ng-content becomes evident when applied to real-world scenarios. Consider a dashboard layout where you need to display different types of widgets in various sections. You can create a generic dashboard component with ng-content slots for the header, sidebar, and main content area. The parent component can then inject different widgets into these slots, creating a dynamic and customizable dashboard. This approach promotes component reuse and simplifies the management of complex layouts. Learn more about component architecture.

Another common use case is creating modal dialogs. A modal component can have ng-content slots for the header, body, and footer, allowing the parent component to inject custom content into each of these sections. This makes the modal component highly versatile and adaptable to different scenarios. For instance, one modal might display a confirmation message with “OK” and “Cancel” buttons, while another might display a form for collecting user input. By using multiple ng-content, you can create a single modal component that can handle a wide range of use cases, reducing code duplication and improving maintainability. For more on modal design, see [Nielsen Norman Group’s article on dialogs](https://www.nngroup.com/articles/dialog-boxes-modals/).

A third example involves creating reusable form components. You can design a generic form component with ng-content slots for different form fields. The parent component can then inject specific form controls (e.g., text inputs, dropdowns, checkboxes) into these slots, creating a dynamic and customizable form. This approach allows you to easily create different types of forms without having to write separate components for each one. This type of component is particularly useful when working with reactive forms. To understand reactive forms, refer to the [Angular documentation on forms](https://angular.io/guide/reactive-forms).

What is the primary purpose of ng-content in Angular?

The primary purpose of `ng-content` is to project content from a parent component into a child component, allowing for dynamic and reusable UI elements.

How does multiple ng-content differ from a single ng-content?

**Multiple ng-content** allows you to define specific slots within a child component's template, using CSS selectors to determine which content from the parent component gets projected into each slot. A single `ng-content` projects all content without differentiation.

Can I provide default content for ng-content slots?

Yes, you can provide default content by placing it within the `ng-content` tags in the child component's template. This ensures that something is displayed even if the parent component doesn't provide any content for that slot.

What types of CSS selectors can I use with ng-content?

You can use any valid CSS selector, including element types (e.g., `h1`, `p`), classes (e.g., `.header`, `.content`), and attributes (e.g., `[data-type="title"]`).

Is multiple ng-content a good approach for complex layouts?

Yes, **multiple ng-content** is particularly useful for creating complex and customizable layouts, such as dashboards, modal dialogs, and reusable form components.

Question & Answer :
I am trying to build a custom component using multiple ng-content in Angular 6, but this is not working and I have no idea why.

This is my component code:

<div class="header-css-class"> <ng-content select="#header"></ng-content> </div> <div class="body-css-class"> <ng-content select="#body"></ng-content> </div> 

I am trying to use this component in another place and render two different HTML code inside body and header select of ng-content, something like this:

<div #header>This should be rendered in header selection of ng-content</div> <div #body>This should be rendered in body selection of ng-content</div> 

But the component is rendering blank.

Do you guys know what I could be doing wrong or what is the best way to render two different sections in same component?

Thanks!

1. You could add dummy attributes header and body as opposed to template references (#header, #body).
2. And transclude using ng-content with select attribute like select="[header]".

app.comp.html

<app-child> <div header >This should be rendered in header selection of ng-content</div> <div body >This should be rendered in body selection of ng-content</div> </app-child> 

child.comp.html

<div class="header-css-class"> <ng-content select="[header]"></ng-content> </div> <div class="body-css-class"> <ng-content select="[body]"></ng-content> </div> 

DEMO