6
  • I'm trying to set a background image on a div with angular.
    • The 'image.imagrURL | async' works well when just assigning it to a plain 'img' tag.
    • The issue I'm having is when trying to assign it to an inline background image

The question is: How do I modify my below snippet to work? :)

HTML 

 <div [ngStyle]="{'background-image': 'url(' + image.imageurl | async  + ')'}">

Error

Parser Error: Missing expected }

I'm not entirely sure where that's supposed to go.

Thank you.

1 Answers1

10

Adding brackets will be helped, because you are trying call async pipe on 'url(' + image.imageurl

Try in this way:

<div [ngStyle]="{'background-image': 'url(' + (image.imageurl | async)  + ')'}">
Jaroslaw K.
  • 5,224
  • 2
  • 39
  • 65
  • Amazing! Thank you! –  Oct 16 '17 at 10:31
  • 3
    Please note that the application might request for 'null' or 'undefined' from server if this element gets loaded before the async task resolved; which is quite likely to occur. Consider adding special *ngIf syntax introduced with Angular 4. That is:
    – kursattokpinar Dec 17 '17 at 10:42