Angular: How to data-bind an async property to a background image

Question

• 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.

Answer 1

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)  + ')'}">