How to change the mat-cell color based on json response in Mat-Dynamic-Table Angular?

Question

I am having dynamic mat table to show json response which i am receiving from rest api. I want to change the cell color based on some condition. But, If i try to apply [ngStyle] it's applying for the whole row. I want to apply it only for a particular cell,

  <mat-table #table [dataSource]="dataSource">
    <ng-container *ngFor="let column of columns" [cdkColumnDef]="column.columnDef">
      <mat-header-cell *cdkHeaderCellDef>{{ column.header }}</mat-header-cell>
      <mat-cell *cdkCellDef="let data" [ngStyle]="{'color': data.name == 'Boron' ? 'green':'red'}">{{ column.cell(data) }}</mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>

JSON structure:

     [ 
         {
          "col1":   {"name":"Boron","grade":A15},
          "col2":   [A15],
         },
         {
          "col1":   {"name":"Hydrogen", "grade":A28},
          "col2":   ["Hydrogen"],
         },
         {
           "col1":   {"name":"Helium", "grade":A56},
           "col2":   ["Helium","A56"],
         },
     ]

In that above structure "col 1" is for display the values in the table and "col 2" is a value to change the color code of particular row

Anyone help will be appreciated!!!!

score 1 · Answer 1 · answered Apr 03 '20 at 06:32

1

You can do some thing like this, change your ngStyle as

[ngStyle]="{'color': data.name == 'Boron' && column.header == "your table header name where you want this color" ? 'green':'red'}"

Example

In HTML

 <ng-container *ngFor="let column of columnsDef">
<ng-container [matColumnDef]="column.id">
  <th mat-header-cell *matHeaderCellDef> {{column.id}} </th>
  <ng-container *ngIf="!column.dynamicCellComponent">
    <td mat-cell *matCellDef="let element"  [ngStyle]="{'color':column.id=='position' && element.position==1 ? 'red':''}" > 
      {{element[column.id]}}
    </td>
  </ng-container></ng-container></ng-container>

Hope this helps!

answered Apr 03 '20 at 06:32

Goskula Jayachandra

3,931
2
12
22

can u share me the stackblitz for this? – S.M.Priya Apr 03 '20 at 12:08
here it is https://stackblitz.com/edit/angular-dynamic-cell-mat-table-jffpgj – Goskula Jayachandra Apr 03 '20 at 14:32
Here you was hardcoded the column name 'position' and column values as '1' right. For me, everything should be dynamic. – S.M.Priya Apr 07 '20 at 06:16
You told that on some condition you should change the color can you tell me whats the condition or create a similar JSON and can you share to me. – Goskula Jayachandra Apr 07 '20 at 15:13
{ "col1": {"name":"Boron","grade":A15}, "col2": [A15], }, in this you need to change the color of grade is it right – Goskula Jayachandra Apr 08 '20 at 12:58
you will be having two columns name and grade is it right can you please post a picture of your table – Goskula Jayachandra Apr 08 '20 at 13:07
{ "col1": {"name":"Boron","grade":A15}, "col2": [A15], }, in this you need to change the color of grade is it right - yes correct. Table is assual only. In that JSON structure "col1" for showing the result in table. "col2" is for changing the color for the particular row values – S.M.Priya Apr 09 '20 at 06:10
Can you have any idea on this? – S.M.Priya May 11 '20 at 10:41
Hi @S.M.Priya I had tried it, check this once https://stackblitz.com/edit/angular-dynamic-cell-mat-table-jffpgj , hope this the one you are looking for – Goskula Jayachandra May 11 '20 at 16:02
Hi@ user12129132 thanks for ur replay. This the expected one. But, I think u were hardcoding the column values while pushing it into JSON2. For me, it should me dynamic – S.M.Priya May 12 '20 at 08:32
Can you create a stackblitz for your app it will be easy if you do that – Goskula Jayachandra May 12 '20 at 08:37
it was correct only what you have done. the only thing is..you were hardcoding the values pushing from JSON1 to JSON2. If its dynamic..my issue will be resolved JSON2.push({name:item.col1.name,grade:item.col1.grade,color:item.col2}). See here name and grade was hardcoded. Because i will receive dynamic data via services – S.M.Priya May 12 '20 at 08:39
Are you getting the details that are displaying in the table from a API – Goskula Jayachandra May 12 '20 at 08:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/213677/discussion-between-user12129132-and-s-m-priya). – Goskula Jayachandra May 12 '20 at 08:48
Did u find any solution for this? – S.M.Priya May 26 '20 at 06:28

How to change the mat-cell color based on json response in Mat-Dynamic-Table Angular?

1 Answers1