CODEWITHSUNDEEP
angulartypescript
Adam Boostani
Adam Boostani

Reputation: 6247

How to insert html in a child component in angular?

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?

Upvotes: 10

Views: 19902

Answers (2)

Adam Boostani
Adam Boostani

Reputation: 6247

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.

Upvotes: 1

Malai
Malai

Reputation: 353

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

Upvotes: 22

Related Questions