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

let = "<h1>Hello Angular 2</h1>"; ?? you have to declare name with let — Pardeep Jain
– Pardeep Jain, Commented Mar 23, 2017 at 9:51

Pardeep Jain · Accepted Answer · 2017-03-23 09:56:34Z

15

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

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

edited Mar 23, 2017 at 9:56

answered Mar 23, 2017 at 9:53

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kriti Over a year ago

I want to add an href indise innerHtml. How can I do it?

Pardeep Jain Over a year ago

simply use a instead of span then, is there any issue with this ? and change href with routerLink

Quan Truong Over a year ago

@PardeepJain can i use innerHtml with a UI framework like Ant Design ? E.g : test='<nz-table>...</nz-table>'

Collectives™ on Stack Overflow

render HTML dynamically in angular 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related