Change row color in a dynamically created table based on date value in Angular

Question

I am creating a table dynamically on running a query. All columns are dynamically created. I want to color a row based on a column value which has date values in it.

Please check the below table for better understanding

In this table, I want to set row color based on the last column 'aggiornato al'. Below are the rules:

• if the (sysdate - aggiornato al) <= 3 hours -> colour in light GREEN

• if the (sysdate - aggiornato al) > 3 hours AND <= 48 hours -> colour in light ORANGE

• if the (sysdate - aggiornato al) >= 48 hours -> color in light RED

HTML:

<table class="table stripe executedQueryResult no-padding" id="queryTable" #queryTable>
    <thead class="text-center no-padding" style="background: #0042be;">
         <tr style="font-size:12px;color:white">
             <th *ngFor="let key of debugQueryData">{{key}}</th>
         </tr>
    </thead>
    <tbody class="text-center">
         <tr *ngFor="let value of debugResult | filter : filters.searchUsersText">
            <td *ngFor="let key of debugQueryData; index as i"><div [innerHTML]="value[key]"></div> 
            </td>
         </tr>
    </tbody>
</table>

TS:

debug() {

    this.hideData=0;
    this.valueCount = 0;
    this.loadingResult = true;
    this.clearData();

    this.executeQueryData.QueryText = this.addEditQueryForm.value.QueryText;
    this.executeQueryData.Parameters = this.addEditQueryForm.value.Parameters;
    this._freeFormReport.ExecuteReportQuery(this.executeQueryData).subscribe(data => {
      this.debugResult = data;
      if(this.debugResult.length==0){
        this.debugResult = [{Error: 'No data found'}]
        this.debugQueryData = Object.keys(this.debugResult[0]);
      }else{
        ////////////// Setting Key ///////////////

        this.isDebug = 1;
        if(data[0]=='O'){
          this.toastr.error('Errore esecuzione Free Form Report. ' +this.debugResult, 'Error');
          this.debugResult = [{Error: 'No data found'}]
          this.debugQueryData = Object.keys(this.debugResult[0]);
          this.hideData=1;
        }else{
          if(this.debugResult.length > 10){
            this.debugResult = this.debugResult.splice(0,10);
          }
          ////////////// Setting Key ///////////////
          this.hideExport = false;
          this.debugQueryData = Object.keys(data[0]);

          console.log(this.debugQueryData[0]);
          $('#btnExporta').show();
          setTimeout(() => {
          this.dtTrigger3.next();
           this.rerender();
            this.loadingResult = false;
            this.hideExport = false;
          }, 2000);
        }
      }
    },error => {
      this.toastr.error('Errore in query execution', 'Error');
    });
    this.hideParametersModal();
  }

Please suggest a possible solution for this as I am unable to develop one.

Answer 1

You can do it with ngClass HTML

<table class="table stripe executedQueryResult no-padding" id="queryTable" #queryTable>
    <thead class="text-center no-padding" style="background: #0042be;">
         <tr style="font-size:12px;color:white">
             <th *ngFor="let key of debugQueryData">{{key}}</th>
         </tr>
    </thead>
    <tbody class="text-center">
         <tr *ngFor="let value of debugResult | filter : filters.searchUsersText">
            <td [ngClass]={'red': (value.sysdate - valueaggiornatoAl) >=48, 'green': <green condition>}  *ngFor="let key of debugQueryData; index as i"><div [innerHTML]="value[key]"></div> 
            </td>
         </tr>
    </tbody>
</table>

CSS

.red {
     background: red;
}
.green {
     background: green;
}

You can see more about ngClass in this answer Angular: conditional class with *ngClass