ag-grid : How to set custom background color in column header?

ag-grid, angular

Solution

If you have a predefined set of colors for the header, I would use the `headerClass` option:

defaultColDef: {
  headerClass: function(params) {
    // logic to return the correct class
    return 'header-one';
  }
}

Then in css use the background-color property:

.header_one {
  background-color: red;
}

See the following example where clicking on a cell changes the header color:

https://stackblitz.com/edit/ag-grid-header-color-dynamic?file=index.js

Problem

I'm using ag-grid with Angular 4. I want to be able to change the background color of individual column headers during runtime. It seems that I have to use headerComponentFramework property in coldefs, but I have no idea how to use this. Anybody has an idea? regards, Alex

Original source