Angular 5 Transclusion

If you worked with AngularJS, you may be familiar with the term transclusion and the ngTransclude directive. Angular replaces the term transclusion with content projection, but the concepts are similar. Let's see some examples.

1. Single-slot Content Projection

<!-- test.component.html -->

<div class="header">...</div>
<div class="content">
    <ng-content></ng-content>
</div>
<div class="footer">...</div>

Usage:

<test><p>I am the content</p></test>

2. Multi-slot Content Projection

<!-- test.component.html -->

<div class="header">...</div>
<div class="content">
    <ng-content select=".title"></ng-content>
    <ng-content select=".subtitle"></ng-content>
    some content here...
    <ng-content></ng-content>
</div>
<div class="footer">...</div>

Usage:

<test>
    <div class="title">I am the title</div>
    <div class="subtitle">I am the subtitle</div>
    <p>I am the content</p>
</test>

These are two simple examples, but <ng-content> together with the slot selector is more powerful.