I have a dynamic mat-table where columns are created dynamically. I am looking to implement an expand column feature using [attr.colspan]. This functionality should apply the attribute when a click event is detected on a specific column header.
When I insert this feature into the HTML template, it only affects the first column. How can I make the [attr.colspan] apply dynamically to each individual column?
<ng-container
matColumnDef="{{ column }}"
*ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef (click)="headerEvent(column)">{{ column }}</th>
<td mat-cell *matCellDef="let element" [attr.colspan]="1">{{ element[column] }}</td>
</ng-container>If you'd like to see an example, check out this StackBlitz.