Syncfusion Dynamic Columns Shows Blank When the columns array is updated in Angular

Question

I have a syncfusion Grid Implemented In my applocation where I am using dynamic columns array to render the columns. Inside columns I have some properties which shows and hides the columns when the columns array is updated the custom column template does not show any data If the column is inside the loop. if the column is outside the loop it shows the data and works fine. the other columns are also working fine without template

[![enter image description here][1]][1]

       
        <ejs-grid cssClass="contactsClassGrid" class="contactsClassGrid" *ngIf="!isLoading && columnsLoaded" #grid
            [dataSource]='dataAdaptor' [allowSorting]='true' [allowPaging]="true" [allowResizing]="true"
            [allowReordering]='true' [pageSettings]='pageSettings' (actionBegin)="onPageSettingsChanged($event)">
            <e-columns>
                <e-column headerText='Quick links' width='230' [visible]='true' [template]='editDeleteTemplate'
                    [allowResizing]="false" [allowReordering]='false'></e-column>
                <ng-container *ngFor="let column of columns">
                    <e-column
                        *ngIf="!column.iconColumn && column.elementAttribute !='links' && column.elementAttribute != 'leadAttorneys'"
                        [visible]='!column.hidden' [field]='column.elementAttribute' [headerText]='column.label'
                        [width]='column.columnWidth'>
                    </e-column>
                    <e-column
                    *ngIf="!column.iconColumn && column.elementAttribute !='links' && column.elementAttribute == 'leadAttorneys'"
                    [visible]='!column.hidden' [field]='column.elementAttribute' [headerText]='column.label'
                    [template]="attorneysTemplate"
                    [width]='column.columnWidth'>
                </e-column>
                </ng-container>
            </e-columns>
        </ejs-grid>
        <ng-template #attorneysTemplate let-data>
            {{ data?.matter }}
        </ng-template>
        <ng-template #editDeleteTemplate let-data>
            <div class="display-icon" style="display: flex; align-items: center; justify-content: left;">
                <app-quick-links [caseId]="data.id" [showDocumentDirectory]="showDocumentDirectory"
                    [disableTimeTracking]="disableTimeTracking"
                    [selectedIconOption]="selectedIconOption"></app-quick-links>
            </div>
        </ng-template>
    ```

Now here I am doing the updation in columns 
    this.tableSettingsService.tableSettings$.subscribe(data => {
            this.columns = this.tableSettingsService.showHideCustomColumnsForTable(this.columns, this.tableSettings.tableName, this.columns);
            });


  [1]: https://i.stack.imgur.com/vAZOl.png

Answer 1

 <ng-container *ngFor="let column of columns; trackBy:trackByFn">
this line
    trackByFn(index, item) {
        return item.id; // or a unique identifier in your object
    }

it works when I use trackBy after the loop

Answer 2

Refresh the columns by employing the "refreshColumns" method after updating the columns list. This ensures that the changes made to the columns are properly applied. Please refer to the code snippet below for clarification:

[app.component.ts]

updateColumns() {
  // updating the columns
  .  .  .  .  .

  // refreshing the columns
  this.grid.refreshColumns();
}