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

Issue

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

Solution

 <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

Answered By - Hafiz Muhammad Atif