Search code examples
htmlangularfroala

angular4: innerHTML does not display "text-align: center"

I'm using Froala editor within my Angular4 project
and I want to display what the user write inside the editor in another <p> tag.
The binding works perfectly fine :
in my-component.html:

<div [froalaEditor] [(froalaModel)]="froalaContent">Hello, Froala!</div>
<br>
<!-- here I display the editor content -->
{{froalaContent}} 
<br>
<!-- and here I convert the variable into html view -->
<p [innerHTML]="froalaContent"></p>

So this the display result:
enter image description here But as you can see the tag <p> contains a css attribute text-align:center; but in the blow line the text is not centered and this is what I found in ChromeDevTools:
enter image description here

There is no text-align: center; attribute !!
Can someone explain this behaviour ? and thanx in advance.

Solution

  • You should use the DomSanitizer to tell Angular that it is safe to keep the style set in the user input