Inline style background-image using ngFor

Question

I am trying to set the background image for each div in an ngFor loop. In the JSON I'm looping over I have a property property.Image that holds a url string to an image. <img src={{flag.properties.Image}}/> works, but my attempt to show the image as a background-image does not. In the browser Inspector the div background-image shows as {{flag.properties.Image}} rather than reading the url that I'm trying to point to. What am I doing wrong?

<h3>Top Flags</h3>
<div class="grid grid-pad">
  <div *ngFor="let flag of flags" (click)="gotoDetail(flag)" class="col-1-4">
    <div class="module flag" style="background-image: url({{flag.properties.Image}})">
      <h4>{{flag.id}}</h4>
      <div><img src={{flag.properties.Image}} height="50px" /></div>
      <div>{{flag.properties.Adaptation}}</div>
    </div>
  </div>
</div>

Answer 1

Use instead

[style.background-image]="'url('+flag.properties.Image+')'"

See also In RC.1 some styles can't be added using binding syntax