I have a modal
component that displays a modal popup and displayed the transcluded ng-content
on it.
Here's what I'm trying to do in my modal
component:
<modal>{{someHTMLString}}</modal>
When I do this, the HTML markup is escaped and displayed (which I did expect).
So I tried this:
<modal [innerHTML]="someHTMLString"></modal>
The HTML is unescaped but it somehow shows up on screen and not as a transcluded content as if <modal>
was a regular HTML tag, and the actual modal shows up empty.
How can I have ng-content
serve unescaped HTML?
You can use parent div to accomplish this: