Angular use innerHTML with escaped element attributes

Question

Hi I have an html respose from a rest server like this:

<h3>Center Align</h3>\n<p style=\"text-align: center;\">This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.</p>

and when I use innerHTML is rendered as:

<h3>Center Align</h3>
<p>
This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes.
</p>

Missing the escaped attributes for the <p> tag so I have an empty <p> instead of <p style="text-align: center;">

Is there any way to render this content with its attributes?

Gosha_Fighten · Accepted Answer · 2017-09-08 15:19:12Z

1

Use DomSanitizer to process your HTML. It's insecure by default.

constructor(private s: DomSanitizer) {
  this.text = 'my HTML';
  this.text = s.bypassSecurityTrustHtml(this.text);
}

See the plunk.

answered Sep 8, 2017 at 15:19

Gosha_Fighten

3,8881 gold badge25 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Angular use innerHTML with escaped element attributes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related