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 it displays 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>

There are no escaped attributes for the tag <p>, so I have an empty <p>instead<p style="text-align: center;">

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

Answer 1

Use DomSanitizer to process your HTML. This is not safe by default.

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

See plunk .