Newbe Dev Stack

Answer : In ag-grid the columns in gridOptions are used once at grid initialisation. If you change the columns after initialisation, you must tell the grid. This is done by calling gridOptions.api.setColumnDefs() Details of this api method are provided in the ag-grid documentation here. I think this has been fixed already. I am able to do something like this now with latest angular and ag-grid. Please note I am using ngxs here, however this still indicates the ability to get the column definitions async as I am getting the column defs based on the property names of the data that is being returned from the back-end in this case rowData. Firstly, I am fetching the row data from the back-end API. Then when it is fetched I perform operations in the Select for column that map the headers from returned data to properties. The data will not be displayed without headers, as soon as the headers are there it will redraw the grid with all the column definitions and data. <ag-grid...

Answer : I found solution :) It is very very easy but i could't see at first :) only like that : <mat-cell *matCellDef="let element "> {{element[disCol]}} </mat-cell> I must use {{element[disCol]}} only in HTML. Now , everything is ok:) For a full working example based on @mevaka's Where jobDetails$ is the array of items. columns$ is equvilent to Object.keys(jobDetails$[0]) so is just an string[] <table mat-table [dataSource]="jobDetails$ | async"> <ng-container *ngFor="let disCol of (columns$ | async); let colIndex = index" matColumnDef="{{disCol}}"> <th mat-header-cell *matHeaderCellDef>{{disCol}}</th> <td mat-cell *matCellDef="let element">{{element[disCol]}}</td> </ng-container> <tr mat-header-row *matHeaderRowDef="(columns$ | async)"></tr> <tr mat-row *matRowDef="let row...