<mat-table [dataSource]="items">
    @for (column of columnsDefinitions; track column; let index = $index) {
        <ng-container matColumnDef="{{column.name}}">
            <mat-header-cell *matHeaderCellDef>
                <div
                    [ngClass]="{
                        'highlighted': index === 2
                    }">
                    Text
                </div>
            </mat-header-cell>
            <!--Cell definition omitted-->
        </ng-container>
    } 
    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
    <mat-row *matRowDef="let row; columns: columnsToDisplay"></mat-row>
</mat-table>


@Component({/* Omitted */})
public class TableComponent {
  @Input() public columnsDefinitions: {name: string}[] = [];
  @Input() public items: any[] = [];
  public columnsToDisplay: string[] = ['boo', 'foo'];
}

The issue is the [ngClass] expression is not working here, no header cell div ever gets the highlighted class whether it has 2 index or not.

This expression works well with static elements although, that is without mat-table and its ng-containers.

Why does this glitch happen, shouldn’t the let variable be preserved for a loop iteration? How can I work it around?