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>

score 11 · Accepted Answer · edited May 23 '17 at 12:02

11

Use instead

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

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

edited May 23 '17 at 12:02

Community

1
1

answered Jun 18 '16 at 18:59

Günter Zöchbauer

623,577
216
2,003
1,567

1

I ended up creating a custom pipe like you suggested in your linked answer. It worked! – jm22 Jun 19 '16 at 16:51
1

This shouldn't be necessary with RC.2 anymore. – Günter Zöchbauer Jun 19 '16 at 17:20

Inline style background-image using ngFor

1 Answers1

Linked