Insert snippet HTML from JSON and render it as HTML

Question

I have this code in my Template HTML

    <div *ngIf="alertOptions?.texts">
      <p *ngFor="let paragraph of alertOptions?.texts">
        {{ paragraph }}
      </p>
    </div>

The Texts in my JSON are like:

Please <b>Call us</b> <a href="tel:+5798643210"> 5798643210</a>.<br>Weekends Chat with us <a href="#">Chat</a>

I Know that I need to escape the quotes in my JSON!

"alertOptions":{
    "texts": [
      "Please <b>Call us</b> <a href=\"tel:+5798643210\"> 5798643210</a>.<br>Weekends Chat with us <a href=\"#\">Chat</a>"
    ]
}

But, I get

How to do that?

Does this answer your question? [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) — R. Richards, Jan 25 '22 at 19:48
Hello, in JS you don't need the escape quote if you use [template litterals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) — dolig, Jan 25 '22 at 21:26
check this https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling — joseluisbz, Jan 29 '22 at 04:33

score 2 · Answer 1 · edited Jan 25 '22 at 20:30

2

Please try <div [innerHTML]="paragraph" > </div>

edited Jan 25 '22 at 20:30

Random

2,766
1
14
23

answered Jan 25 '22 at 19:20

Mateusz Ścigała

161
1
1
4

score 2 · Accepted Answer · edited Jan 25 '22 at 21:18

2

That code would work!

<div *ngIf="alertOptions?.texts">
    <p *ngFor="let paragraph of alertOptions?.texts" [innerHTML]="paragraph"></p>
</div>

edited Jan 25 '22 at 21:18

SwissCodeMen

3,359
4
15
26

answered Jan 25 '22 at 19:26

joseluisbz

2,590
1
30
48

Insert snippet HTML from JSON and render it as HTML

2 Answers2