CODEWITHSUNDEEP
angularangular-material
karan1131
karan1131

Reputation: 31

How to assign different colour to mat-row in angular?

The case here is I want to assign colour to each row of mat table based on some logic (for e.g orderId of the list) for orderId <= 1000 colour should be red, for 1000 < orderId <= 2000, colour should be green and orderId > 2000, colour should be yellow. I tried this but unable to achieve the desired output:

<mat-row *matRowDef="let row; columns: displayedColumns" 
         (click)="highlightedRows.push(row)" 
         [style.background]="highlightedRows.indexOf(row) != -1 ? backgroundColor : ''">
</mat-row>

Any help will be appreciated.

Upvotes: 0

Views: 154

Answers (3)

Swoox
Swoox

Reputation: 3740

You can use ngClass for this. This will require to make css classes with the required color.

Then after this you need to do:

<mat-row *matRowDef="let row; columns: displayedColumns" (click)="highlightedRows.push(row)" 
[ngClass]="{'redClass': row.orderId <= 1000, 'greenClass': row.orderId > 1000 && row.orderId <= 2000, 'yellowClass': row.orderId > 2000}">

Source: Multiple conditions in ngClass - Angular 4

Upvotes: 0

Sam
Sam

Reputation: 1851

<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"         
         [style.background]="getBackgroundColour(i)">
</mat-row>

getBackgroundColour(i) {
    if(i <= 1000) {
        return 'red'
    }
    if(i <= 2000) {
        return 'green'
    }
    if(i > 2000) {
        return 'yellow'
    }
}

Upvotes: 1

Faizan
Faizan

Reputation: 1142

Call a function in html 

<mat-row *matRowDef="let row; columns: displayedColumns" (click)="highlightedRows.push(row)" [style.background]="setBgColor(row.orderId)"></mat-row>

and in your ts you can add a function 

  setBgColor(orderId: number){
    if(orderId <= 1000){
      return "#ff0000";
    }
    else if(orderId  <= 2000 && orderId > 1000){
      return "#008000";
    }
    return "#ffff00";
  }

Upvotes: 0

Related Questions