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?

Answer 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.