how to assign the images based on values from response using angular2

Question

i am working on a application, wherein it has a graph section. i need to show the images based on 1,0,-1. i have to bind the images respectively based on the response. In demo i am not able to display the images even though i gave google links. Please help me to bind the values along with the images through response.

HTML:

<tbody>
                    <tr>
                      <td scope="row">PSF. &nbsp;&nbsp;$8.25</td>
                      <td><img class="graph-arrows" src="../../../assets/images/up-arrow.png"></td>
                      <td><img class="graph-arrows" src="../../../assets/images/double-arrow.png"></td>
                      <td><img class="graph-arrows" src="../../../assets/images/down-arrow.png"></td>
                    </tr>
                    <br>
                  </tbody>

Ts:

this.propertiesPerMonth = [{
      "costPSF": { "market": 1, "region": 0, "national": -1 }
    },
    {
      "variances": {
        "expenses": [
          { "expense": "Janitorial", "market": 1, "region": 0, "national": -1 },
          { "expense": "Electricity", "market": 0, "region": 0, "national": -1 },
          { "expense": "HVAC", "market": -1, "region": -1, "national": 1 },
        ]
      }
    }
    ]

DEMO

Ala A. · Accepted Answer · 2019-05-17 08:52:25Z

1

You should provide a link to the image, not the page containing the image, thus that URL should end with an image extension like .PNG or .SVG, for example the first url should be this https://image.flaticon.com/icons/svg/32/32028.svg To get this url, right-click the image and "Open Image in new Tab"

edited May 17, 2019 at 8:52

answered May 17, 2019 at 8:43

Ala A.

2,34526 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Bhrungarajni Over a year ago

thanks for response, il do this, can u pls help me to bind the images as per the response

Ala A. Over a year ago

You should have an *ngFor that iterates over that JSON object, inside it have an *ngIf="expense.market == 1" and src="yourUpArrowSrc", repeat that 0 and -1, and do the same for expense.region and expense.national. Take a look at Font-Awesome or use Angular Material Icons, you can use images but these are much better.

Bhrungarajni Over a year ago

in my application, i have used the images given from client, but here i was not able to put images so

Bhrungarajni Over a year ago

ya i have used ngFor also but it doesnt work properly, from ts itself we need to handle i hope so for values with 1,0 and -1

Ala A. Over a year ago

upload the files to the assets folder, i will try to do it for you

|

ViqMontana · Accepted Answer · 2019-05-17 08:43:26Z

1

In your demo, your are links to google pages, not actual images. Try replacing them with actual images and they will work.

E.g. try the link "https://onaliternote.files.wordpress.com/2016/11/wp-1480230666843.jpg" as an example.

answered May 17, 2019 at 8:43

ViqMontana

5,7384 gold badges26 silver badges62 bronze badges

1 Comment

Bhrungarajni Over a year ago

thanks for response ya i did that, i need to bind values from response pls help me out

Collectives™ on Stack Overflow

how to assign the images based on values from response using angular2

2 Answers 2

14 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related