'Angular Column is not Displayed when Toggle is Open

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?

enter image description here

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();
  }
javascripthtmlangulartypescript


Solution 1:[1]

After toggle happens, you need to call " initializeGridColumns() " to initialize the columns again.

This is based on the explanation you had on your question. Also you dont really show what is the function does upon toggle.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 AdamTheFirst

Related Questions