unable to change ag-grid theme in angular

Question

I have angular application that is using ag-grid (angular 10 and angular material). I have imported both dark and light theme which I am trying to change dynamically. my

style.scss

@import "../node_modules/ag-grid-community/dist/styles/ag-grid.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css";
@import "../node_modules/ag-grid-community/dist/styles/ag-theme-alpine-dark.css";

the component with the grid (app.component.html)

<ag-grid-angular
  style="width: 100%; height: 100%;"
  [ngClass]="!isDarkTheme ? 'ag-theme-alpine': 'ag-theme-alpine-dark'"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
>
</ag-grid-angular>

component.ts

export class AppComponent implements OnInit {
  isDarkTheme: Observable<boolean>;

  constructor(private themeService: ThemeService) { }

  ngOnInit(): void {
    this.isDarkTheme = this.themeService.isDarkTheme;
  }

the value of isDarkTheme is changing properly, however angular is only applying dark theme in both cases. How do I apply both dark and light theme in my application.

Answer 1

You need use async pipe. Update your code with [ngClass] line to this:

[ngClass]="!(isDarkTheme | async) ? 'ag-theme-alpine': 'ag-theme-alpine-dark'"