I want to set row and column virtualisation to angular Ag-Grid based on data from the table

 <ag-grid-angular
  style="width: 100%; height: 100%;"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [suppressColumnVirtualisation]="suppressVirtualisation"
  [suppressRowVirtualisation]="suppressVirtualisation"
  [rowData]="rowData"
  [class]="themeClass"
  (gridReady)="onGridReady($event)"
  [gridOption]="gridOptions"
 
  />

I set virtualisation in my .ts file

gridOptions: GridOptions = {
    suppressColumnVirtualisation: false,
    suppressRowVirtualisation: false
  };
 suppressVirtualisation = false;

 onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<IOlympicData[]>(
        "https://www.ag-grid.com/example-assets/olympic-winners.json"
      )
      .subscribe((data) => {
        this.rowData = data.slice(0, 100);
        this.suppressVirtualisation = true;
        // this.gridOptions = {
        //   suppressColumnVirtualisation: true,
        //   suppressRowVirtualisation: true
        // };
        // this.gridOptions?.suppressColumnVirtualisation = true;
        // this.gridOptions?.suppressVirtualisation = true;
       
      });
  }

Doesn’t matter if I use a variable or grid options, I’m not able to set virtusalisation dynamically.

CodeSandBox

Thanks in advance!!!