Ag-Grid-Angular=> how do we Hide and show child columns based on button click available on column header

Question

below is the code I tried.problem FOR COLUMN C the toggle button to show hide does not appear but for Column B it appears.

import { Component } from '@angular/core';
import { BHeaderComponent } from './CustomHeaderComponent';
import { ColDef ,ColGroupDef,GridApi} from 'ag-grid-community';

@Component({
  selector: 'app-root',
  template: `
    <ag-grid-angular
      style="width:100%; height: 500px;"
      class="ag-theme-quartz"
      [columnDefs]="columnDefs"
      [autoGroupColumnDef]="autoGroupColumnDef"
      [rowData]="rowData"
    ></ag-grid-angular>
  `,
})
export class AppComponent {
  columnDefs: (ColDef | ColGroupDef)[]=[];
  rowData: any[];
  frameworkComponents: any;
  public autoGroupColumnDef: ColDef = {
    width: 200,
  };

  constructor() {
    this.columnDefs = [
      { headerName: 'A', field: 'a' },
      {
        headerName: 'B', field: 'b' ,
         headerComponent: BHeaderComponent,
         headerComponentParams: { toggleChildrenVisibility: this.toggleChildrenVisibility.bind(this) },
        //  children: [
        //   { headerName: 'D', field: 'd' ,hide:false},
        //   { headerName: 'E', field: 'e',hide:false}
        // ]
      },
      {
        headerName: 'C', field: 'c' ,
         headerComponent: BHeaderComponent,
         headerComponentParams: { toggleChildrenVisibility: this.toggleChildrenVisibility.bind(this) },
         children :[
          { headerName: 'D', field: 'd' },
          { headerName: 'E', field: 'e',}
        ]
      }
    ];
    this.rowData = [
      { a: 'A1',b:'b1', c:'c1',d: 'D1', e: 'E1'  },
      { a: 'A2', b:'b2',c:'c31',d: 'D1', e: 'E1'  },
    ];
  }
  gridApi: GridApi | null = null;
  children :ColDef []= [
          { headerName: 'D', field: 'd' },
          { headerName: 'E', field: 'e',}
        ];

  toggleChildrenVisibility(val:any) {
    //to hide and show the childre on above columns
  }

  onGridReady(params: any) {
    this.gridApi = params.api;
  }
}

import { Component } from '@angular/core';
import { IHeaderAngularComp } from 'ag-grid-angular';
import { IHeaderParams } from 'ag-grid-community';

@Component({
  selector: 'app-b-header',
  template: `
    <div style="display: flex; align-items: center;">
      <span>{{params.displayName}}</span>
      <button (click)="toggleChildrenVisibility(params)" style="margin-left: 5px;">Toggle</button>
    </div>
  `,
})
export class BHeaderComponent implements IHeaderAngularComp {
  refresh(params: IHeaderParams<any, any>): boolean {
      throw new Error('Method not implemented.');
  }
  public params: any;
  public collapsed: boolean = false;
  agInit(params: any): void {
    this.params = params;
    //params.column.colDef.children = params.column.colDef.headerComponentParams.children;
  }
  toggleChildrenVisibility(params:any) {
    console.log('Toggle button clicked');
    this.params.toggleChildrenVisibility(params.displayName);
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgGridAngular, AgGridModule } from 'ag-grid-angular';
import { BHeaderComponent } from './CustomHeaderComponent';

@NgModule({
  declarations: [
    AppComponent,
    BHeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridAngular,
    AgGridModule
  ],
  exports: [
    BHeaderComponent // exporting header component from shared module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I am trying to hide and show the child columns of A column in ag-grid on click of button beside the headername of parent column.let's say in my grid 3 columns are there A, B,C AND B HAS children D and E.I want to show and hide the children D and E based on button(available beside column name B) clicked enter image description here