Module "ag-grid-angular" has no exported member 'AgGridThemeOverrideService'

Question

I am going to customize the color theme of ag-grid as user's input color. So I searched many data and found some sample codes. They said aboutAgGridThemeOverrideService from ag-grid-angular. This is the sample code:

import { Component } from '@angular/core';
import { AgGridThemeOverrideService } from 'ag-grid-angular';
import 'ag-grid-enterprise';

@Component({
  selector: 'app-root',
  template: `
    <ag-grid-angular
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      class="ag-theme-custom"
    ></ag-grid-angular>
  `,
  styles: [
    `
      .ag-theme-custom {
        --ag-accent-color: #ff0000;
        --ag-border-color: #0000ff;
      }
    `
  ]
})
export class AppComponent {
  rowData = [];
  columnDefs = [];

  constructor(private agGridThemeOverrideService: AgGridThemeOverrideService) {
    this.agGridThemeOverrideService.overrideThemeVariables({
      'accent-color': 'green',
      'border-color': 'yellow'
    });
  }
}

But this does not work, and show error message Module "ag-grid-angular" has no exported member 'AgGridThemeOverrideService'. And I cannot find AgGridThemeOverrideService service of ag-grid-angular. Is there any solution of this or any other alternative solution, please help me. Thank you.

Answer 1

To override global css variables, we can use specific classes.

Let's say we want to change the border style and color of the grid.

@Component({
  selector: 'my-app',
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine" // we use this theme in this example
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular> `,
})

We import the necessary css definitions

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import '../styles.css'; // this is our own css definitions file in which override global css variables

Now let's override them

styles.css

.ag-theme-alpine {
  /* disable all borders */
  --ag-borders: none;
  /* then add back a border between rows */
  --ag-row-border-style: dashed;
  --ag-row-border-width: 5px;
  --ag-row-border-color: rgb(150, 150, 200);
}

Here's the result

You can find more info on https://www.ag-grid.com/angular-data-grid/global-style-customisation-borders/

Answer 2

I solved this problem using [style.--variable-name]="cssVariable". My codes are following.

// ag-grid-test.component.ts

@Componenet {
   selector: 'ag-grid-test',
   template: `<ag-grid-angular 
                *ngIf="ag$ | async as ag"
                [ngClass]="ag.themeClassName"
             ...
             [style.--ag-foreground-color]="ag.themeVariables['--ag-foreground-color']"
             [style.--ag-background-color]="ag.themeVariables['--ag-background-color']"
             [style.--ag-secondary-foreground-color]="ag.themeVariables['--ag-secondary-foreground-color']"
             [style.--ag-header-background-color]="ag.themeVariables['--ag-header-background-color']"
             [style.--ag-odd-row-background-color]="ag.themeVariables['--ag-odd-row-background-color']"
   ></ag-grid-angular>`
}

class AgGridTestComponent {
   constructor(
        private agConfigService: AgConfigService
   ) {}
   
   ag$ = this.configService.ag$;

}