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?
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments