Upon reviewing solutions to similar issues, it appears that the error is linked to the usage of *matHeaderCellDef. The code I am working on encompasses various functionalities. I have a table that blends dynamic data and form elements which I aim to group into a Form. Any assistance would be greatly appreciated.
Below is my current code:
<form [formGroup]="userTable">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Sr. No. </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
... (remaining code snippets) ...
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
The following script corresponds to my TS file:
export class PsdGamificationComponent implements OnInit {
dataSource:MatTableDataSource<categories>;
public displayedColumns: string[] = ['id','category', 'points', 'w1'];
... (remaining TypeScript code) ...
}
You can access the complete code on StackBlitz here: https://stackblitz.com/edit/angular-ivy-xhtgrz