How can I to color a row in Ag-Grid with Angular

Question

I need to color a row when my backend return a specific attribute. I am using Ag-grid with Angular. At first I just try to color a row, without any rule, just for test, but it still didn't work.

My HTML:

<ag-grid-angular   
#agGrid   style="width: auto; height: 300px;"   class="ag-theme-material"   
(gridReady)="onGridReady($event)"   
[rowData]="rowData"   
[gridOptions]="gridOptions"   
[rowClassRules]="rowClassRules"   
[columnDefs]="columnDefs"   
[defaultColDef]="defaultColDef"   
[modules]="modules"   
[pagination]="true"   
[paginationPageSize]="paginationPageSize"   
[domLayout]="domLayout"   
[rowHeight]="rowHeight"   
[overlayLoadingTemplate]="overlayLoadingTemplate"   
[overlayNoRowsTemplate]="overlayNoRowsTemplate"
> </ag-grid-angular>

My .ts:

My grid settings:

this.agGridService.getHeaderPlan().subscribe(header => {
  this.columnDefs = header;
});

this.defaultColDef = {
  enableRowGroup: true,
  enablePivot: true,
  enableValue: true,
  sortable: true,
  filter: true,
  resizable: true,
  editable: true
};

this.paginationPageSize = 8;
this.domLayout = 'autoHeight';
this.rowHeight = 40;
this.overlayLoadingTemplate =
  `<div class="spinner-border text-primary" style="width: 5rem; height: 5rem;" role="status">
    <span class="sr-only">Loading...</span>
  </div>`;

this.overlayNoRowsTemplate =
  `<div class="spinner-border text-primary" style="width: 5rem; height: 5rem;" role="status">
    <span class="sr-only">Loading...</span>
  </div>`;
}

When i put data on Grid:

ngAfterViewInit(): void {
this.importService.getPlan().subscribe((data: Plan[]) => {
  this.rowData = data;
}, error => {
  this.httpError = error;
  this.onBtHide();
});
}

My OnGriReady function:

onGridReady(params) {
   this.gridApi = params.api;
   this.gridColumnApi = params.columnApi;

// this.rowClassRules = {
//   'rowError': function (params) {
//     console.log(params.params.data.ANF);

//     const numSickDays = params.data.ANF;
//     return numSickDays > 24 && numSickDays <= 43;
//   }
// };
}

Anything I do work. I try to do this rule, but nothing again. I put my CSSs attributes on style.css and component.css

pls Help me.

Answer 1

Put the class in style.css and pass it to the gridOptions:

// all rows assigned CSS class 'my-green-class'
gridOptions.rowClass = 'my-green-class';

// use the condition on the row based on the data in side the param
gridOptions.getRowClass = function(params) {
    if (params.data.ANF > 24 && numSickDays <= 43) {
        return 'my-shaded-effect';
    }
}