Menu
I want to make a generic modal component 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 component such that the parent component 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?
566
In TypeScript, generics can be used to better describe the types in classes that are reusable with multiple derived types. Angular does not support instantiation of generic components, but this limitation can be worked around by creating a derived component for each derived type we want to use it with.
What 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 component.
Lets say your component 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!!
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
