-1

I have the JSON like below but I have a lot of data:

items: [ { itemId: "22222", category: 'A', total: 100, price: 20 }, { itemId: "666666", category: 'A', total: 80, price:10 }, { itemId: "555", category: 'B', total: 50 , price:10 } .... ... { itemId: "555", category: 'B', total: 2, price: 2 } ]

I create on .scss

  &.is-green {
      color: green;
    }
    &.is-red {
      color: red;
    }

I want to use it something like that:

<div *ngFor="let item of items;> 
    <div>{{item.category}}</div>
    <div 
      [ngClass]="{
        'is-green': item.total ,
        'is-red':item.total
         }"
       >
       {{item.total}}</div>
    </div>

From this data I want to find min value of total and price and change color to green. Also I want to find max value of total and price and change color to red.

I want to color only min and max value, if value are same I not coloring

Please, have you any idea how to make this?

lona bin
  • 25
  • 6
  • 1
    What have you tried so far to solve this on your own? You will find plenty of questions (+answers) here on SO on how to find the min/max value of an array -> [How much research effort is expected of Stack Overflow users?](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) – Andreas Oct 14 '21 at 08:01
  • Does this answer your question? [Find the min/max element of an array in JavaScript](https://stackoverflow.com/questions/1669190/find-the-min-max-element-of-an-array-in-javascript) – Ruina Oct 14 '21 at 08:06
  • Please, I am not only looking for finding min and max but also coloring them – lona bin Oct 14 '21 at 08:09

1 Answers1

1

"Find the min/max value inside an array" this has already been answer in Find the min/max element of an array in JavaScript.

As for how to use the values found (min/max) with ngClass there are plenty of ways to do it, check the angular documentation about ngClass, pleanty of information and examples there. You can do something like

 <div 
      [ngClass]="{
        'is-green': item.total === maxValue,
        'is-red': item.total === minValue
      }"
>
   {{item.total}}
</div>

Were maxValue and minValue are the values found.

Please, for the future, as said in the comments, you should try to search for your questions before posting them in SO. Posting a question here should be your last resource.

Ruina
  • 401
  • 2
  • 12