Angular - ng-content basic

What is ng-content?

ng-content is a directive to get and display ContentChildren.
Use this when you want to inject an element into the component from outside.

1
2
3
4
5
6
// app.component.html

<app-child>
    <div class="hoe">class "hoe"</div>
    <div hoe>role "hoe"</div>
</app-child>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// child.component.html

<p>
    child works!
</p>

<hr>

<div>
    <ng-content select=".hoe"></ng-content>
</div>
<div>
    <ng-content select="[hoe]"></ng-content>
</div>

Demo

ng-content