CODEWITHSUNDEEP
angular
Rohan Sampat
Rohan Sampat

Reputation: 970

render HTML dynamically in angular 2

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>";

Upvotes: 4

Views: 7354

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86720

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

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

Upvotes: 15

Related Questions