CODEWITHSUNDEEP
angulartypescript
arriff
arriff

Reputation: 439

How to show Images in Angular if condition is met

I have an API call which returns back a number. If the number is positive show a green a image enter image description hereand if a button is negative show redenter image description here I want a red image to show.

If I try this the image loops multiple time instead of a single time, How can I achieve this?

This is what I have

 <td class="warning" [ngStyle]="{'background-image' : (reports.response_rate_7day_change > 0) ? getIncrease():  getDecrease() }"></td>

My functions to fetch the images from local storage

 getIncrease()
  {
    return "url('assets/images/increase.png')";
  }

  getDecrease()
  {
    return "url('assets/images/decrease.png')";
  }

when I run the code and the value returned is negative it show the image below, am not sure what am doing wrong enter image description here

Upvotes: 0

Views: 657

Answers (1)

Ehsan K. harchegani
Ehsan K. harchegani

Reputation: 3128

I think it has nothing to do with angular but your CSS try this:

 <td class="warning" [ngStyle]="{'background-image' : (reports.response_rate_7day_change > 0) ? getIncrease():  getDecrease() }"
style="background-repeat: no-repeat"></td>

Upvotes: 2

Related Questions