How to enable mat-table with multi selection and dynamic columns - angular-material

Question

I am trying to enable multi selection options with dynamic columns. Though dynamic columns are working multi selection is not working.
Regards
jcm
<mat-table [dataSource]="dataSource" matSort="matSort">
<ng-container [matColumnDef]="col.columnDef" *ngFor=" let col of displayColumns">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ col.header }}
<ng-container [matColumnDef]="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox #checkbox (change)="$event ? masterToggle() : null" [disabled]="isDisabled" [checked]="selectionTable.hasValue() && isAllSelected()"
[indeterminate]="selectionTable.hasValue() &&
!isAllSelected()"></mat-checkbox>
</th>
</ng-container>
</th>
<td mat-cell *matCellDef="let element ">{{ element[col.columnDef] }}</td>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionTable.toggle(row) : null" [checked]="selectionTable.isSelected(row)"></mat-checkbox>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnDefs"></tr>
<tr mat-row *matRowDef="let row; columns: columnDefs; "></tr>
</mat-table>

Answer 1

You have to add a header to displayColumns for the multi-select column, and when you running over them using *ngFor, you have to check using *ngIf whether you are in the first header (which belongs to the multi-select column) or in the other headers (which belongs to the dynamic columns), and create the header and column respectively.
You can see an example I made in stackblitz.