Angular 12 Multiple ng-content Example – Transclude Templates to Child Component Example

Adding multiple ng-content tags in child component example; placing more than one component passed to transclude in child component; In this Angular 12 tutorial, we will discuss examples of passing more than one component template to the child; Using this we can transclude multiple components at particular places in the child.

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12

Components are the building blocks of Angular application. These components can be placed in application with multiple relations like parent-child, siblings, scattered etc. Sometimes, we also pass components from the parent component to a child component to transclude it in the child component. That transcluded component is then placed in the child, where we add the ng-content tag.

Let’s understand the concept of transcluding the components in more detail.

How to pass template or component into a child in Angular?

First, we’ll create a simple example of how to transclude the content from parent to child component using the ng-content directive.

Step 1) Create a new component

In the Angular application, under the components folder create a new component named MyLayoutComponent. Let ng CLI generate it by executing the below command.

$ ng generate c components/my-layout

Step 2) Updating the App Component

Now, open the app.component.html file, then update it as shown below:

<app-my-layout>
  
  <div>
    <h1>My Layout Text</h1>
    <p>My Layout Content from App Component</p>
  </div>
  
</app-my-layout>

Above, you will notice, we’re passing some HTML templates inside the app-my-layout tags themselves. This seems simple but proves very helpful in real-world applications. Not only static HTML, but you can also pass other components as well.

If you run your application by hitting $ ng serve –open ,  you will not see anything inside the MyLayoutComponent template. Because, until now MyLayout doesn’t know what to do with that H1 and P tags received.

 

Step 3) Add ng-content Tag

Add the ng-content tag inside the my-layout.component.html file as shown

<p>my-layout works!</p>

<ng-content></ng-content>

Now if you run the application, you will see the HTML content passed will be transcluded to the MyLayout as shown below.

 

But, we have a limitation over here, If we want to show H1 and P tags into different parts of MyLayout template if will not be possible.

Even if we add multiple ng-content tags, only the last added ng0content will be considered. Let’s check-in the next section on how to add multiple ng-content tags.

How to add multiple ng-content tags to transclude at different sections?

To add multiple ng-content, we need to add the select attribute as shown below.

<p>my-layout works!</p>

<ng-content select="[header]"></ng-content>
<ng-content select="[footer]"></ng-content>

And update the app.component.html file as shown below

<app-my-layout>
  
  <div header>
    <h1>My Layout Text</h1>
    <p>My Layout Content from App Component</p>
  </div>

  <div footer>
    <p>Footer text</p>
  </div>

</app-my-layout>

The select attribute property creates a mapping between the templates where these need to be transcluded.

 

Conclusion

Similarly, we can add the name to components, which can be passed to show at their respective ng-content tags with select properties defined.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *