What could be the reason Angular 5 + Material 2 are very very slow?

I had a similar issue with a table becoming very slow after 10 rows of data or so. Turns out, the table gets very slow if you use things like dialogs, selects, menus, and other generated controls within a table row. Material Menus can be moved outside the table by using matMenuTriggerData to pass the data to a single menu outside of the table. Dialogs can be used by triggering a function that creates the dialog. Selects do not have a good alternative that I found, so I ended up restyling a Material Menu that lived outside of the table.

The table is very quick with hundreds of rows now.

I have now figured out that it is related to the big mat-table that has about 300 records that actually contains the buttons to open these material dialogs. When I have only two records it's as fast as the angular documentation. I still can't really understand it, since I would expect this to work (300 is not that much.), but it answers the question. The reason this is slow is because of larger tables in combination with dialogs.

Code:

 <ng-container matColumnDef="actions">
    <mat-header-cell *matHeaderCellDef fxFlex="96px"> </mat-header-cell>
    <mat-cell *matCellDef="let element" fxFlex="96px">
        <button mat-icon-button (click)="openEditDialog(element)"><mat-icon>edit</mat-icon></button>
        <button mat-icon-button (click)="openDeleteDialog(element)"><mat-icon>delete</mat-icon></button>
    </mat-cell>
  </ng-container>

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

Unfortunately the fix was not using this at all (in this way).