Thanks for the tip but that's not getting me anywhere either. I've tried it in the manners shown below based on your suggestion and the sample you provided. Neither way worked. The class just isn't getting applied.

Here is the class I'm trying to apply:

Class is found in component.scss

.igx-thead_center-and-middle-text {
  display: --webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

Here is the first way I tried it:

Applied in component.html

<igx-column-group [header]="'Contact Name'" [cellClasses]="{'igx-thead_center-and-middle-text': true}">

Here is the second way I tried it

Applied in component.ts

  public theadCenter = {
    "igx-thead_center-and-middle-text": true
  };

Applied in component.html

<igx-column-group [header]="'Contact Name'" [cellClasses]="theadCenter">

Any other suggestions?

Thank you for the assistance. This put me on the correct path.

Thanks for the suggestion but your solution would apply that style to all objects that use those classes which if I"m not mistaken are all of the headers for any igxgrid.

I'm trying to apply a class to a specific cell in a specific grid. I'm not having an issue with the CSS values needed, my problem is that the class is not seen by the grid.

When I look at the grid via Chrome's debugger, the class isn't listed at all. If I manually add the class through the debugger it works fine.