For my project I am using an igx-grid.
Creating every column manually works just fine and as intended but for design reasons (because the gid we used before was build this way) we want to fill it with a data structure similar to this
tableFields = [ { name: "Product ID ", field: "ProductID", sortable: false, }, { name: "Product Name", field: "ProductName", sortable: false, }, { name: "OrderDate", field: "OrderDate", sortable: false, } ];
With this structure my goal is to fill the igx-columns iteratively like this
<div *ngFor="let column of tableFields"> <igx-column field="{{column.field}}" header="{{column.Name}}" sortable="{{column.sortable}}"></igx-column> </div>
Sadly this leads to very weird bugs concerning the sortable-attribute. I prepared a stackblitz for this, but long story short, as soon as I have iteration in there sortable is always true, even if I explicitly set it false in the loop.
Hello Christoph,
Thank you for contacting Infragistics Developer Support!
The perceived "bug" is due to the way you bind the sortable input of the columns to the actual value. In Angular the "{{ expression }}" syntax is string interpolation. When you do sortable="{{ column.sortable }}" this evaluates to the string "false" which when coerced to bool is actually true. If you want to pass input properties other than strings use the bind syntax [inputProperty]="value/expression".
For more information check out the Angular quick cheat sheet for the template syntax.
Also, I've updated your sample with the correct way to bind the column properties.