This sample shows how you can use Angular's ngFor directive to create dynamic columns in a FlexGrid control.

The sample presents a UI used to create and edit a collection of strings. The collection is used in an ngFor directive to generate the grid columns. The markup is simple:

<wj-flex-grid [itemsSource]="data">
    <wj-flex-grid-column *ngFor="#col of columns.items" [binding]="col">
    </wj-flex-grid-column>
</wj-flex-grid>

Notice how the grid columns are automatically updated as you edit the source collection.

Edit the columns here

See the result here

{{col}}

Dynamic Columns

Edit the columns here

See the result here