How to find min , max value on array and how to change color text for min value green color and max value red color using angular

Question

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?

Answer 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.