CODEWITHSUNDEEP
javascripthtmlangular
Bünyamin Sarıgül
Bünyamin Sarıgül

Reputation: 3091

Angular2 Html inside a Component

I want create a component like a template. For example, instead of writing this everywhere: 

<div class="myClass">
    <div class="myHeader" id="headerId"> Title </div>
    <div class="myContent" id="contentId"> <<Some HTML code>> </div>
</div>

I want to use a component like:

<my-component title="Title" headerID=headerId contentID=contentID>
    <<Some HTML code>>
</my-component>

How can I implement something like these in Angular2?

Upvotes: 25

Views: 15807

Answers (1)

j2L4e
j2L4e

Reputation: 7050

Use <ng-content></ng-content> in your component.

my.component.html

<div class="myClass">
    <div class="myHeader" id="headerId"> Title </div>
    <div class="myContent" id="contentId"> <ng-content></ng-content> </div>
</div>

parent.component.html

<my-component title="Title" headerID=headerId contentID=contentID>
    <<Some HTML code>>
</my-component>

Whatever is inside <my-component></mycomponent> will be rendered in <ng-content></ng-content>

Upvotes: 57

Related Questions