How to change the color of entire row if value is missing. inside <td> element. Here value is coming from api which we are looping through and getting

Issue

Here if the value inside <tr> comes null for the cell then the entire row should have different color. My code look like this:

<ng-container *ngFor="let row of table?.rows; let rowIndex = index">
  <tr>
     <td *ngFor="let value of row.data; let valueIndex =  index;">
       <ng-container *ngIf="row.edit_mode; else nonEditTable">
           <input type="text" placeholder="Enter data" [value]="value 
            (change)="onTablevalueChanged($event.target.value, rowIndex, valueIndex)" 
            class="form-control">
       </ng-container>
       <ng-template #nonEditTable>
         <span class="truncate table-truncate" [pTooltip]="value" tooltipZIndex="12000">
            {{ value }}
         </span>
       </ng-template>
    </td>

  </tr>
<ng-container />

It should be coming like this, as the row first value is missing else it should be white.

Solution

You could create a method to test whether at least one null value is present in row.data:

hasNullValue(data: any[]): boolean {
  return data.includes(null);
}

And in your template you call it like this:

<tr [ngClass]="{'custom-class': hasNullValue(row.data)}"></tr>

If you need this functionality very often or if you have a large dataset, you should consider creating a custom pipe instead. A pipe will only be called when the values change. The method will be called on every change detection.

Answered By - insertusernamehere