Passing innerHtml with inline styles (Angular 10)

Question

I am attempting to pass through html with inline styles as a variable to an angular component.

var htmlValue = "<div style="margin-left: 13px; font-size: large;" fxLayout="column" fxLayoutAlign="center start">
    Need Help?
  </div>"

However the inline style is removed when rending the code on the component.

<div [innerHtml]="htmlValue"></div>

Renders as:

<div>
  <div>
    Need Help?
  </div>"
</div>

Is there a way to stop this from happening

peinearydevelopment · Accepted Answer · 2021-04-21 13:57:29Z

4

You need to utilize the DomSanitizer. With the sanitizer injected in the constructor, your htmlValue assignment would be updated to the following.

var htmlValue = this.sanitizer
    .bypassSecurityTrustHtml("<div style="margin-left: 13px; font-size: large;" fxLayout="column" fxLayoutAlign="center start">
    Need Help?
  </div>")

Working StackBlitz example.

WARNING

Angular stripping out the styles, etc initially is due to safety concerns, so do this cautiously. This should be used only when you can trust the html being injected. If the html is something that ultimately comes from user input, then this should be done very judiciously as the user could utilize this to inject unsafe code into your application.

answered Apr 21, 2021 at 13:57

peinearydevelopment

11.5k5 gold badges52 silver badges82 bronze badges

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

2 Comments

azhar Over a year ago

i have same error. but my content is being fetched from api. how can i handle this.

peinearydevelopment Over a year ago

@azhar, you will need to show some code. This should work for you as well.

Collectives™ on Stack Overflow

Passing innerHtml with inline styles (Angular 10)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related