Как динамически видеть заголовок и столбцы в Datatable с угловым материалом

Question

У меня возникла проблема при попытке отобразить в html столбцы и заголовки в пределах данных, используя угол 7 и материализоваться.

После стольких поисков и попыток я могу добиться этого:

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <ng-container *ngFor="let disCol of header; let colIndex = index" matColumnDef="{{disCol}}">
    <mat-header-cell mat-sort-header *matHeaderCellDef> <input class="check-head" checked="checked" type="checkbox" (change)="seleccion(colIndex)" />{{disCol}}</mat-header-cell>
    <mat-cell *matCellDef="let element "> 
        {{element[colIndex]}}
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Здесь я оставляю код, я надеюсь, что это полезно