DomSanitizer for styling

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

To avoid cross-site scripting or XSS some styling expressions might be flagged as unsafe by Angular.

unsafe value used in a resource URL context.

If you face this particular issue, you can flag the expression as safe by using the bypassSecurityTrustStyle API on the DomSanitizer.

demo.component.html
<div *ngIf="image" [style.background-image]="image"></div>
demo.component.ts
export class DemoComponent {
  constructor(private sanitizer: DomSanitizer){
    this.image = this.sanitizer.bypassSecurityTrustStyle(`url(${someImgUrl})`);
  }
}
Tutorials