Content projection with ng-content
Content projection is a way to import HTML content from outside the component and insert that content into the component's template in a designated spot.
Source
app.component.ts
<my-component>
Some content
</my-component>
my.component.ts
Projected content: <ng-content></ng-content>
Result
ng-content with select
Source
app.component.ts
<my-component>
<div class="primary">Primary content</div>
<div secondary>Secondary content</div>
<div>Div content</div>
Non selected content.
</my-component>
my.component.ts
<div><ng-content></ng-content></div>
<div>
Primary content:
<ng-content select=".primary"></ng-content>
</div>
<div>
Secondary content:
<ng-content select="[secondary]"></ng-content>
</div>
<div>
Div content:
<ng-content select="div"></ng-content>
</div>
Result
Non selected content.
Primary content:
Primary content
Secondary content:
Secondary content
Div content:
Div content
ng-content with pojectAs
You can define which selector will be used with <ng-content>
.
Source
app.component.ts
<my-component>
<ng-container ngProjectAs="custom">
Projected As.
</ng-container>
Non selected content.
</my-component>
my.component.ts
<div><ng-content></ng-content></div>
<div>
<ng-content select="custom"></ng-content>
</div>
Result
Non selected content.
Projected As.
Links & Tutorials