I’m about to bind the group header row in the mat-table dynamically. But the DOM couldn’t find the headerId.

HTML:

<ng-container *ngFor="let result of headerData; let i = index">

                <ng-container [matColumnDef]="header-row-'+i+'-group">

                    <th mat-header-cell *matHeaderRowDef

                        [style.text-align]="center"

                        [attr.colspan]=result.Count>

                        {{result.Name}}

                    </th>

                </ng-container>

</ng-container>

<tr mat-header-row *matHeaderRowDef="groupHeaderColumns"></tr>

<tr mat-header-row *matHeaderRowDef="columnNames"></tr>

Typescript:

this.groupHeaderColumns = ['header-row-1-group', 'header-row-2-group']

Tried,

1. headerRow as ‘header-row-1-group’ static but still the same error
2. Replaced Div instead of ng-container

Error: Couldnot find the header with id header-row-1-group

Where am i wrong and what change i should do?