Angular not updating with Dev Extreme data-grid columns and views

Question

component.html

<dx-data-grid>
 <dxi-column *ngFor="let column of columns">
  // creating columns
 </dxi-column>
</dx-data-grid>

component.ts

public setupColumnsAndState(newColumns[]: any, state: any) {
 columns = newColumns[];
 // Is there something that could be done here to update datagrid columns?
 this.datagrid.instance.state(state); //state has columns
}

When setting the datagrid state, if the columns within the state do not exist yet in the datagrid (ex. state has 5 columns and datagrid only has 3), then when setting the state, the datagrid filters them out.

So in this example (what I think is happening)

• columns are being set
• page has yet to create the columns
• datagrid does not have updated columns
• when setting state, the datagrid columns are empty so state columns are being filtered.

I've tried looking into ngZone and changeDetectorRef, but I couldn't get it to work properly and am unsure if these would even help in this situation.

Answer 1

Try something like what follows. Set up a ChangeDetectorRef and and call the detectChanges where you have your current comment.

constructor(private cd: ChangeDetectorRef) {}
public someFn() {
  this.cd.detectChanges();
  // ngOnChanges will be called
}

Information comes from: This Article