is it possible to update the options showPreHeaderPanel and createPreHeaderPanel by clicking a button. I tried to modify this.gridOptions and I tried to use this.angularGrid.slickGrid.setOptions but the grid doesn't update it.

import { Component, OnInit } from '@angular/core';
import { Column, GridOption, AngularGridInstance } from 'angular-slickgrid';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'ngSlickGrid';

  angularGrid: AngularGridInstance;
  columnDefinitions: Column[] = [];
  gridOptions: GridOption = {};
  dataset: any[] = [];

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  ngOnInit(): void {
    this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: "test 1" },
      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, columnGroup: "test 1" },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, columnGroup: "test 2" },
      { id: 'start', name: 'Start', field: 'start', columnGroup: "test 2" },
      { id: 'finish', name: 'Finish', field: 'finish' },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
    ];
    this.gridOptions = {
      enableCellNavigation: true,
      showPreHeaderPanel: true,
      createPreHeaderPanel: true
    };

    this.dataset = [];

    for (let i = 0; i < 1000; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 28));
      const randomPercent = Math.round(Math.random() * 100);

      this.dataset[i] = {
        id: i, // again VERY IMPORTANT to fill the "id" with unique values
        title: 'Task ' + i,
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: `${randomMonth}/${randomDay}/${randomYear}`,
        finish: `${randomMonth}/${randomDay}/${randomYear}`,
        effortDriven: (i % 5 === 0)
      };
    }
  }

  public deleteMultiHeader(): void {
    console.log("deleteMultiHeader");
    // this.gridOptions.showPreHeaderPanel = false;
    // this.gridOptions.createPreHeaderPanel = false;
    const gridOpt: GridOption = {
      showPreHeaderPanel: false,
      createPreHeaderPanel: false
    }
    this.angularGrid.slickGrid.setOptions(gridOpt, true);
  }

  public createMultiHeader(): void {
    console.log("createMultiHeader");
    // this.gridOptions.showPreHeaderPanel = true;
    // this.gridOptions.createPreHeaderPanel = true;
    const gridOpt: GridOption = {
      showPreHeaderPanel: true,
      createPreHeaderPanel: true
    }
    this.angularGrid.slickGrid.setOptions(gridOpt, true);
  }
}

<div class="container">
  <button (click)="deleteMultiHeader()" data-test="auto-commit">
    Delete multi header
  </button>
  <button (click)="createMultiHeader()" data-test="auto-commit">
    Create multi header
  </button>
  <angular-slickgrid gridId="grid1" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
    [dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)">
  </angular-slickgrid>
</div>