render HTML dynamically in angular 2

Question

I'm working on an Angular 2 app in which I had created a dialog which will popup on user click. And the content in that dialog has to be dynamically rendered as html. Static html is running well but dynamic is not running.

Code:

<md-dialog-content><h1>Hello Angular 2</h1></md-dialog-content>////It works..

<md-dialog-content>{{test}}</md-dialog-content>///It does not work.

It displays the text as '<h1>Hello Angular 2</h1>'

In Component:

let test = "<h1>Hello Angular 2</h1>";

Answer 1

You can simply use [innerHTML] directive to achieve it.

<md-dialog-content>
    <span [innerHtml]='test'></span>
</md-dialog-content>