How to apply custom css class in ag-grid cell in angular?

Question

I am unable to apply css in cell of ag-grid in angular based on my logic. I have assigned an object to grid. But on that field i have assigned a Object.hours value and i need to apply logic on based on Object.status property.

Using official documentation i am able to apply css by current cell value as mentioned here https://www.ag-grid.com/javascript-grid-cell-styles/#cell-style-cell-class-cell-class-rules-params. But i need to apply it on based of parent Object.status

//Object i am using in ag-grid
this.timeSheet = {
 projectName: 'HRMS',
 mon: {
  hoursWorked: 6,
  status: 'Submitted'
 },
 tue: {
  hoursWorked: 6,
  status: 'Submitted'
 }
}

//Working code
this.columnDefs = [
  {headerName: 'Project', field: 'projectName'},
  {headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: {
     'text-danger': 'x == 6'}},
];

Above code is working and text-danger class is assigned to the individual cell

//I need it to work like that
this.columnDefs = [
   {headerName: 'Project', field: 'projectName'},
   {headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: {
     'text-danger': 'mon.status == `Submitted'}}, 
 ];

Need help in 'text-danger': 'mon.status == `Submitted' line it is not working like that

Answer 1

cellClassRules functions take a params object that contains the data of the row.

Try this code which uses the params object.

this.columnDefs = [
  { headerName: 'Project', field: 'projectName' },
  {
    headerName: 'MON ', field: 'mon.hoursWorked', cellClassRules: {
      'text-danger': params => params.data.mon.status == 'Submitted'
    }
  },
];