Insert snippet HTML from JSON and render it as HTML-CodePudding

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?

CodePudding user response：

That code would work!

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

CodePudding user response：

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