How to use ngStyle for background url in Angular 4

Question

I have below html:

Answer 1

If you're getting your background image from a remote source or a user input you will need to have angular sanitize the url. In your component you will want to add the following bits of code...

import { DomSanitizer } from '@angular/platform-browser';

export class YourComponent {
  constructor(private _sanitizer: DomSanitizer) { }

  public sanitizeImage(image: string) {
    return this._sanitizer.bypassSecurityTrustStyle(`url(${image})`);
  }
}

Try setting your HTML to this...

   

     
Make your food with Spicy.
            

                Shop now1
            
    

And apply the no-repeat 0px 0px; in some class you attach to the div.