I want to make a generic modal ponent that can hold anything, from just text to images/buttons etc. If I do something like this:
<div class="Modal">
<div class="header"></div>
<div class="body">{{content}}</div>
<div class="footer"></div>
</div>
I'm not able to actually pass HTML into content, just text. How can I create a ponent such that the parent ponent can pass in whatever HTML it wants? What if I wanted to add n number of buttons to the footer, each with it's own callback? Is there a better way I should be doing this?
I want to make a generic modal ponent that can hold anything, from just text to images/buttons etc. If I do something like this:
<div class="Modal">
<div class="header"></div>
<div class="body">{{content}}</div>
<div class="footer"></div>
</div>
I'm not able to actually pass HTML into content, just text. How can I create a ponent such that the parent ponent can pass in whatever HTML it wants? What if I wanted to add n number of buttons to the footer, each with it's own callback? Is there a better way I should be doing this?
Share Improve this question edited Aug 22, 2016 at 18:45 CaptainBli 4,2114 gold badges42 silver badges59 bronze badges asked Aug 22, 2016 at 17:55 user3715648user3715648 1,5883 gold badges16 silver badges28 bronze badges1 Answer
Reset to default 7What you are looking for is ng-content
<div class="Modal">
<div class="header"></div>
<div class="body">
<ng-content></ng-content>
</div>
<div class="footer"></div>
</div>
and you may pass any HTML content directly into your ponent.
Lets say your ponent name is my-modal, you may use it like below,
<my-modal>
<<HTML content : this will be replaced in the ng-content area >>
</my-modal>
Hope this helps!!