How to insert html in a child component in angular?

Question

I'm trying to insert html into a child component. Basically something like this:

<custom-container><p>Parnet content</p></custom-container>

I can find references for passing data to child component but not able to find how to pass actual html inside my selector?

Answer 1

You can also use <ng-content> with select attribute

Parent Component:

<child-component>
    <div sample>Content form parent</div>
</child-component>

Child Component:

something..
<ng-content select="[sample]"></ng-content>
some more...

Output:

something..
<div>Content from parent</div>
some more...

More details here

Answer 2

ng-content tag can be used in the template of the child component. That tag will take in anything that you put in between your component selector.