Content Projection In Angular

In Angular, whenever we need to pass the data or element information of the child component from the parent component we can choose the concept of content projection. By using content projection we can provide the HTML content in between the tags of the child component. If you are familiar with AngularJs then we can treat this concept as like “transclusion”.

General way of accessing child component in a component:

Parent Component html

<div>
<childcomponent> </childcomponent>
</div>

If we try to provide as below it won' t work (won’t print hello, gives only child component html):

<div>
<childcomponent> hello </childcomponent>
</div>

If we want to make it work then we need to use the tag <ng-content></ng-content> in the child component.html.

Childcomponent.html

<input type=”text”/>
<ng-content>
</ng-content>

Parentcomponent.html

<div>
<childcomponent> hello </childcomponent>
</div>

Now it will be working perfectly, first getting one “textbox” with text “hello”.

We can also have multiple projections within the child component. But by doing so, the duplicate or xerox of the same HTML content is going to get rendered twice.

Childcomponent.html

<input type=”text”/>
<ng-content> </ng-content>
<ng-content></ng-content>

Class Wise Template rendering

The above piece of code renders the HTML twice. We can also differentiate multiple contents at certain places with class name or attribute names.

Let us think about our parent component as follows:

Parentcomponent.html

<div>
<childcomponent>
<div class=”stdetails”>Student Details content</div>
<div class=”stfee”>Student Fee Details content</div>
</childcomponent>
</div>

If you observe the above parent component, we are having 2 different classes named “stdetails” and “stfee” .

Now let us think that we need to display this information as separate blocks in child component in their respective places. That can be done by using the following code,

Childcomponent.html

<input type=”text”/>
<ng-content select=”.stdetails”> </ng-content> // Here we get student Info details
<ng-content select=”.stfee”></ng-content> // Here we gets the student fee details

Attribute Wise Template Rendering

Like with the above class level here we just add the attribute to the concerned elements as like below.

Parentcomponent.html

<div>
<childcomponent>
<div stdetails>Student Details content</div>
<div stfee>Student Fee Details content</div>
</childcomponent>
</div>

Childcomponent.html

<ng-content select=”[stdetails]”> </ng-content> // Here we get student Info details
<ng-content select=”[stfee]”></ng-content> // Here we gets the student fee details

As with the above ways, in Angular we can fetch the HTML element or template info in the parent template. Even the dynamic data with interpolation can be rendered in the template.