How to show unescaped HTML in angular2 ng-content?

Question

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?

Answer 1

ng-content allows for static (compile time resolution) projection of content.

You can use parent div to accomplish this:

@Component({
  selector: 'my-app',
  template: `
      <modal>
        <div [innerHTML]="html"></div>
      </modal>
  `,
})