2

I want to set background-image dynamically using ngStyle. But it isn't loading anything. Here is my HTML

<div
  id="banner-cover"
  class="bg-parallax animated fadeIn"
  [ngStyle]="{
    'background-image': backgroundImage
  }"
>
...
</div>

And here is my backgroundImage() method defined in ts. Here I have used Domsanitizer which is recommended here.

export class BannerComponent implements OnInit {
  public _backgroundImage = "'url('../../../../assets/images/bg-banner.jpg')'";
  constructor(private sanitizer:DomSanitizer) { }

  ngOnInit() {
  }
  get backgroundImage() {
    return this.sanitizer.bypassSecurityTrustStyle( this._backgroundImage );
  }
}
Abdullah Jubaer
  • 83
  • 1
  • 6

1 Answers1

0

You need to call the getBackgroundImage() method:

[ngStyle]="{ 'background-image': getBackgroundImage() }"

Tahlil
  • 1,031
  • 1
  • 14
  • 26