ag-grid in angular4 custom cell style

Question

good day! i'm looking for grid component for angular 4... after some search i was found ag-grid. after i'm create sample app i have some trouble with following task: - in cell user can select value from select (dropdown) and after this cell must change style based on selected value. i'm create component with grid, component has own html and css file. in css file i put classes for each cell state:

.entry-option1 {
    background-color: transparent;
}
.entry-option2 {
    background-color: #32CD32;
}

in component for column i put definition:

this.columnDefs.push(
{ 
    headerName: 'Options',
    field: 'select',
    editable: true,
    cellEditor: 'select', 
    cellEditorParams: {
        values:[1, 2]
    }, 
    cellClass: (params:any) => {
        let className = this.getClassName(parseInt(params.value));
        return className;
    }
});

and this getClassName:

private getClassForCalendarEntry(value: number): string {
switch (type) {
    case 1:
        return 'entry-option1';

    case 2:
        return 'entry-option2';
    }

    return "";
}

but this is not work: after change value correct class name applied to corresponded DOM element, but component css injected into result html with attribute filtering (ie .entry-option1[_ng-component1]) but alement does not have this attribute, so style does not applied...

i dont want extract styles to global style, but i cant see another way to solve this issue... can anybody help me?

Answer 1

I had the same issue, ::ng-deep worked for me. It's required to access DOM elements not present in the component or created in a different component.

::ng-deep .entry-option1 {
    background-color: transparent;
}