Color of Dynamic table data based on condition using [ngClass]

Ionic Framework ionic-v3
1

I try to make change table data value positive and negative based on condition. Is there any possibility to make it with [ngClass]. i can not get it this way. any idea?

<tr *ngFor="let gbh of gbhoil">

<td [ngClass] ="{'positive': gbh.Last > 0, 'negative': gbh.Last < 0}"> {{gbh.Last}} </td>

2

Hi VENKY_91,

 I have tried your code buddy and its working fine for me. i have tried like this
     <table>
         <tr *ngFor="let thumb of thumbnails" >
         <td [ngClass]="{'positive': thumb.id > 5, 'negative': thumb.id < 5}">{{thumb.src}}</td>
     </table>

i found one space between ngClass and = ,i am not sure but its may be because of that you getting this issue.

3

thank you for your reply i try with space after [ngClass] but something went wrong i can not get it.

I have table like this.
image

and i did css like this

.positive{
    color: green;
}

.negative{
    color: red;
}
4

Ok, it would be helpful if you send your html code as well as ts code.

5

html:

<table *ngIf="gbhoil">
      <tr style="color: #3B6593" >
        <th><strong>Contract</strong></th>
        <th><strong>Last</strong></th>
        <th><strong>Change</strong></th>
        <th><strong>High</strong></th>
        <th><strong>Low</strong></th>
        <th><strong>Time</strong></th>
        <th><strong>Volume</strong></th>
      </tr>
      <tr *ngFor="let gbh of gbhoil;let i=index; let odd=odd; let even=even; let p=p; let n=n;"  [ngClass]="{ odd: odd, even: even }">
        <td style="color: orange" *ngIf="i==0"><strong >ICE G.Oil</strong></td>
        <td style="color: orange" *ngIf="i==1"><strong>ICE Brent</strong></td>
        <td style="color: orange" *ngIf="i==2"><strong>NY H.Oil</strong></td>
        <td style="color: orange" *ngIf="i==3"><strong >NY C.Oil</strong></td>
        <td style="color: orange" *ngIf="i==4"><strong>NY Benzin</strong></td>
        <td style="color: orange" *ngIf="i==5"><strong>USD/EUR</strong></td>
        <td style="color: orange" *ngIf="i==6"><strong >EUR/USD</strong></td>
        <td style="color: orange" *ngIf="i==7"><strong>CHF/EUR</strong></td>
        <td  [ngClass] = "{'positive': gbh.Last > 0, 'negative': gbh.Last < 0}"> {{gbh.Last}} </td>
        <td> {{gbh.Changeing}} </td>
        <td> {{gbh.High}} </td>
        <td> {{gbh.Low}} </td>
        <td> {{gbh.Time}} </td>
        <td> {{gbh.Volume}} </td>
      </tr>
      </table>

ts:

gbhoil:Array<GbhOilList>;
 
 ionViewWillEnter(){         
    this.homeauth.getgbhoil().subscribe((table)=>{
       this.gbhoil=table;
    });

 }
6

Hi Buddy,

Try it by replacing the greater than(>) and Less than (<) with &gt and &lt , i am not sure but sometimes html dont understand < & > sign, since they used for both in HTML for tags and in scripting for comparing…

7

  • I would put a “market” value into each element in the controller and populate it with all the markets, which would eliminate the unwieldy wall of *ngIfs based off the index.

  • Are you sure you want to be checking +/- of Last instead of Change? That seems weird, because none of these commodities should ever close below 0, if I understand the app domain.

  • How are you storing these values in the controller? If they’re really the exact string values shown in your screenshot, then I think you might be being bit by JavaScript’s arcane value conversion rules refusing to convert what you think of as a number into one, due to the use of a comma as a decimal point:

$ node
> "2" > 0;
true
> "2" < 0;
false
> "abc" > 0;
false
> "abc" < 0;
false
> "4.3" < 0;
false
> "4.3" > 0;
true
> "4,3" > 0;
false
> "4,3" < 0;
false
8

My database update every 10 seconds and i don’t need to check ‘Last’ for positive and negative i want to implement some more in conditional way. For positive and negative i just want for ‘Changing’ because those values goes up and down.

I don’t understand what you mean for storing values in controller my application updates every 10 seconds when datababse updated. i do not store any values.

I would appreciated if you give some more suggestions. sorry if i understand wrong.

9

Inside the subscription where you assign to this.ghboil you could add additional market properties to each GbhOilList entry so that the template doesn’t have to have such fragile reliance on array indices.

I’m asking what GbhOilList looks like inside. Are its values that you are trying to treat as numeric numbers? Are they strings? Are they strings using commas as decimal separators? If so, JavaScript can’t natively convert them to numbers. You will have to do that yourself or use a library like numeral.js. JavaScript natively only accepts periods as decimal points, not commas.

i don’t need to check ‘Last’ for positive and negative

Well, you are doing just that in the sample you posted:

{'positive': gbh.Last > 0, 'negative': gbh.Last < 0}

10

I export class like this

export class GbhOilList {
    Last:number;
    Changing:number;
    High:number;
    Low:number;
    Time:number;
    Volume:number;
}
11

Are they really numbers as they come from ghboil? I’m still hung up on the use of commas as decimal separators. JavaScript doesn’t support that internally, and as you see in my first comment, both "4,3" > 0 and "4,3" < 0 are false, so none of your style classes would ever apply.

12

This is requested service.

getgbhoil():Observable<GbhOilList[]>{
        let headers = new Headers();
          headers.append('x-access-token',this.token);
           var options = new RequestOptions({headers: headers});
        return this.http.get('http://node.futures-services.com:9000/middle/gbhoil/',options).map((res:Response) => res.json())
      .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
     }
13

Ok i didn’t notice this i need to check in this way. Thank you.

14

What toy said exactly my database returns type varchar so it is mix of letters and numbers. now i have to convert this to numeric how can i convert this whole array. Can i convert this in sql query or what you suggest numeral.js.