ANGULAR : control rendered after my function is executed

Question

I have a component that contain a table dx-data-grid. I want to set visible at FALSE some column but once. The problem is that my control is rendered after I do the function in the code:

My function to hide some columns:

for (var i = 0, len = this.listedesdossiers.instance.columnCount(); i < len; i++) 
{
    if (this.Liste_Colonnes_A_Afficher.find(colonne=>
      colonne==this.listedesdossiers.instance.columnOption(i).dataField)==undefined )
    {
      this.listedesdossiers.instance.columnOption(i, "visible", false)  
    }
  }

<dx-data-grid
    #listedesdossiers
    id="grid"
    [dataSource]="Liste_dossiers"
    [columnWidth]="150"
    [showBorders]="true"
    [showColumnLines]="true"
    [showRowLines]="true"
    [rowAlternationEnabled]="true"
    height="100%"
    [allowColumnResizing]="true"
    noDataText="Pas de dossiers"
    (onContentReady)="contentReady()"
     (onInitialized)="Initialized($event)"
    >

If I choose ngAfterViewChecked event, for example, It will hide my columns, but like it is valled multiple times when we change the view, it relaunch the function all the times.

And if I choose the ngOnInit, the instance of the control is (logic) undefined. If I choose the onContentReady event of datagrid, it execute the function a lot of times, and reinit the visibility of the columns. If I choose the onInitialized event of datagrid, the instance of the control is (logic) undefined.

Can you help me please?

Sorry for my poor english

Answer 1

In order to call only one your method in ngAfterViewChecked you can use a boolean as a flag in your .ts file. Such as:

if (this.notHidden) {
  this.yourHideFunction();
  this.notHidden = true;
  }