In my code, I have a grid list where the user can add a column by sliding a toggle button. The code works fine but when I refresh the page, the column is not there even though the toggle is open. I have to close the toggle and re-open it in order to see the column. Here is my code what should I fix?

HTML:

<mat-slide-toggle [(ngModel)]="this._materialPlan.IncludeAdditionalProduction"
    (change)="toggleAdditionalProduction()" class="mr-8">Ek Üretim</mat-slide-toggle>

TS:

  constructor() {
    this.initializeGridColumns();
  }

  initializeGridColumns() {

    this.displayedColumns = [
      'Sequence',
      'StockIntegrationCode',
      'ReceiptName',
      'PackagingTheoricYieldQuantity',
      'GeoType',
    ];

    let itemIndex = 0;

    if (this._materialPlan.IncludeAdditionalProduction == true) {
      this.displayedColumns.push("AdditionalProductionQuantity");

    }
    else {
      itemIndex = this.displayedColumns.indexOf("AdditionalProductionQuantity");
      if (itemIndex > 0) {
        this.displayedColumns.splice(itemIndex, 1);
      }
    }

    this.displayedColumns.push("Actions");

  }



 toggleAdditionalProduction() {

    if (this._materialPlan.IncludeAdditionalProduction == true) {
      this.form.controls["AdditionalProductionQuantity"].clearValidators();
      this.form.controls["AdditionalProductionQuantity"].updateValueAndValidity();
    } else {
      this.form.controls["AdditionalProductionQuantity"].setValidators(Validators.required);
      this.form.controls["AdditionalProductionQuantity"].updateValueAndValidity();
    }

    this.initializeGridColumns();
  }