2

I'm using ag-grid in my angular 5 project. I'm trying to add css classes to the cells. Having looked the extensive documentation on ag-grid cell style I have tried to use cellClass and cellClassRules.

The styles are defined in the scss file, as an example: 

.readonly-cell{ background-color: #cccccc; }

The scss file is then included in the component:

@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss']
})

I then apply the class to the column:

{headerName:'Power', field:'power', width:150, cellClass:'readonly-cell'}

The grid itself is working fine. The issue is that the the power cells do not change colour. When I check the rendered HTML in Firefox, I can see that the cell have indeed have the class readonly-cell applied to them. But the style details are not listed on the rules panel.

This makes me think that the classes are not being picked up during the compilation. I don't think it's an issue with ag-grid, but the way the style classes are being picked up.

Is there any way to troubleshoot why the classes and the definitions are not being included in the compilation?

לבני מלכה
  • 15,925
  • 2
  • 23
  • 47
Sivakanesh
  • 817
  • 4
  • 13
  • 36
  • Try that `:host ::ng-deep .readonly-cell{ background-color: #cccccc; }` – David Jul 04 '18 at 12:05
  • do you use scss in all project? maybe you need change in angular-cli.json:`"schematics": { "@schematics/angular:component": { "styleext": "scss" } }` – לבני מלכה Jul 04 '18 at 12:07
  • The project does use scss. I had to use either deep/ng-deep as David suggested or disable the style encapsulation as per the answer. – Sivakanesh Jul 04 '18 at 13:36

1 Answers1

4

You get that behavior because element you are trying to target by a CSS rule is generated outside your Angular component and Angular adds special attributes so that component CSS applies only to that component (and not to its child components, any DOM nodes added outside Angular etc.). You should either build all the HTML you need to style using Angular and in exactly the same component as your styles, or disable that feature. You can disable it either by using ViewEncapsulation.None:

@Component({
  selector: 'app-volume',
  templateUrl: './volume.component.html',
  styleUrls: ['./volume.component.scss'],
  encapsulation: ViewEncapsulation.None
})

or by using /deep/ in your stylesheet, as described here:

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

jaboja
  • 2,178
  • 1
  • 21
  • 35