Angular 12 References/ Templates
🍀 Angular References
Oleksa Novyk | GitHub

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
Projected content: Some content

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