How to add color to a row of second table using p-table in angular?

Question

I have a p-table and I am using it to populate contents as per requirements in two tables. I want to add color to the row of second table according to a condition if column value-suspensed is equal to T then I want to add yellow color to that row. Data-Component.html-

<p-table [columns]="columns" [value]="listItems" 
 dataKey="id" [rowHover]=true styleClass="p-datatable-striped p- 
 datatable-responsive-demo"
 selectionMode="multiple" [(selection)]="selectedItem">
 <ng-template pTemplate="header" let-columns>
<tr>
  <th pSortableColumn *ngFor="let col of getKeys(columns)" pReorderableColumn 
   pResizableColumn>    {{col}}
  </th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-block let-columns="columns" let-rowIndex="rowIndex">
<tr [pContextMenuRow]="block" [pSelectableRow]="block" [pSelectableRowIndex]="rowIndex">
 <td *ngFor="let col of getKeys(columns)" (click)=fetchDataArray(block)>
     {{block[col]}}
 </td>
</tr>
</ng-template>

On click of a row of first table fetchDataArray function is called by which second table data is being fetched.

In ComponentBox file, I am calling the p-table which has been declared and passing the values as required for the tables.

Component-Box.html

 <ng-template #tabdata>
 <p-scrollPanel [style]="{width: '100%', height: '100%'}"   
  <app-data-table [listItems]="data" [selectedEntity]="entity" [entityData]="columnData" 
   (selectedTradeEvent)="fetchDataArray($event)"></app-data-table> 
   // This gives us first table data and on click event which is selectedTradeEvent is called 
   click of a row to fetch data for second table.
  </p-scrollPanel>
 <p-scrollPanel [style]="{width: '100%', height: '100%'}"   
  <app-data-table [listItems]="table.value" [selectedEntity]="table.key" 
  [entityData]="columnData"> </app-data-table> 
  // This gives us second table data
</p-scrollPanel>

</ng-template>

Component-Box.ts file-

fetchDataArray(selectedItem){
this.entityData[this.entity]["showTables"].forEach(val=>{
 this.service.sendGetRequest('getData?id'+selectedItem).then(data=> 
  {
   this.showTables.set("ABC",data);
   data.forEach(val=>{
  for(var key of Object.keys(val)){
  if(key==="C1" && val[key]==="T"){
  //To color this row only 
}

});
});
});
}

I want to add color to the row when my if condition is true i.e. I get the row which satisfies the condition.

Answer 1

try this

<tr [style.background]="block.color ? block.color : ''" [pContextMenuRow]="block" [pSelectableRow]="block" [pSelectableRowIndex]="rowIndex">
 <td *ngFor="let col of getKeys(columns)" (click)=fetchData(block)>
     {{block[col]}}
 </td>
</tr>

Here I don't understand how you use block. IMO it should be <ng-template pTemplate="body" let-data ...> and then in <tr ...> you pass data not block

Then in your .ts file

data.forEach(val=>{
  for(var key of Object.keys(val)){
  if(key==="suspensed" && val[key]==="T"){
    val.color = 'red';
  } else {
    val.color = null;
  }
});