Angular Content Projection
In this post we will review the Content Projection functionality in Angular.
Content Projection
Content projection allows us to make configurable components by passing data when a component is instantiated.
For example, passing an image as content:
app.component.html
1
2
3
<custom-component>
<img alt="My Image" [src]="myImageUrl">
</custom-component>
custom-component.component.html
1
2
3
4
5
<p>Some text here</p>
<ng-content></ng-content>
<p>Some other text here</p>
Where the ng-content tag is located, it will project what you have passed inside the custom-component tag.
Of course we can pass more elements inside the custom-component tag and it will projected in ng-content:
app.component.html
1
2
3
4
5
6
7
<custom-component>
<img alt="My Image" [src]="myImageUrl">
<h2>This is a subtitle</h2>
<p>Some content text</p>
</custom-component>
Partial projection
We can filter the elements being passed as content, to either ignore or break the elements in different parts of the component, depending of the element type. For that, you use the select option in ng-content, and define a CSS selector to filter:
custom-component.component.html
1
2
3
4
5
<p>Some text here</p>
<ng-content select="img"></ng-content>
<p>Some other text here</p>
You can also filter by the element class:
app.component.html
1
2
3
4
5
6
7
<custom-component>
<img class="my-images" alt="My Image" [src]="myImageUrl">
<h2>This is a subtitle</h2>
<p>Some content text</p>
</custom-component>
custom-component.component.html
1
2
3
4
5
<p>Some text here</p>
<ng-content select=".my-images"></ng-content>
<p>Some other text here</p>
You can see that this is possible since we are using CSS selectors.
Of course we could also use containers and everything inside of it will be projected:
app.component.html
1
2
3
4
5
6
7
8
9
<custom-component>
<div class="containers">
<img alt="My Image" [src]="myImageUrl">
<h2>This is a subtitle</h2>
<p>Some content text</p>
</div>
</custom-component>
custom-component.component.html
1
2
3
4
5
<p>Some text here</p>
<ng-content select=".containers"></ng-content>
<p>Some other text here</p>
Multi slot projecting
We can also filter and project using multiple ng-content tags:
app.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
<custom-component>
<div class="containers">
<img alt="My Image" [src]="myImageUrl">
<h2>This is a subtitle</h2>
<p>Some content text</p>
</div>
<div class="another-containers">
<p>Some other content text here</p>
</div>
</custom-component>
custom-component.component.html
1
2
3
4
5
6
7
<p>Some text here</p>
<ng-content select=".containers"></ng-content>
<p>Some other text here</p>
<ng-content select=".another-containers"></ng-content>
Project content that doesn’t match selectors
If you would like to still project content that doesn’t match any selector, you can use an empty ng-content tag, and it will project that doesn’t match:
app.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<custom-component>
<div class="containers">
<img alt="My Image" [src]="myImageUrl">
<h2>This is a subtitle</h2>
<p>Some content text</p>
</div>
<div class="another-containers">
<p>Some other content text here</p>
</div>
<p>This text doesn't match any selector</p>
</custom-component>
custom-component.component.html
1
2
3
4
5
6
7
8
9
<p>Some text here</p>
<ng-content select=".containers"></ng-content>
<p>Some other text here</p>
<ng-content select=".another-containers"></ng-content>
<ng-content></ng-content>