CODEWITHSUNDEEP
angular
jm22
jm22

Reputation: 131

Inline style background-image using ngFor

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>

Upvotes: 3

Views: 4473

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657516

Use instead

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

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

Upvotes: 11

Related Questions