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

Question

I know this might not be a very good question. But I really don't know what to do and I am searching for reasons.

I am running my custom Angular 5 + Material 2 application locally and the mat-dialog and mat-tab are very slow. I have even tried to turn off animations but it's still very slow.

Also when compiling for production with ng-build --prod delivers very slow results.

So maybe I am doing something wrong regarding the dialog. Here is my code:

  openEditDialog(car:Car) {
    let dialogRef = this.dialog.open(EditDemandComponent);
    dialogRef.componentInstance.id = car.id;
    dialogRef.afterClosed().subscribe(result => {
      console.log('The edit dialog was closed');
    });
  }

My constructor:

  constructor(
    private httpClient: HttpClient, 
    private dialog: MatDialog, etc..

and the constructor of the dialog component:

constructor(public dialogRef: MatDialogRef<EditDemandComponent>, etc..

Inside the dialog component I am using the code this.dialogRef.close();

I am really out of options here and I really don't get it, since the material 2 docs are super fast and for me locally everything is super slow. Indicating slow as animations not going smoothly. Taking at least 2 seconds to open a dialog or switch tabs.

Here are my versions:

  "dependencies": {
    "@angular/animations": "^5.0.2",
    "@angular/cdk": "^5.0.0-rc.1",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/flex-layout": "^2.0.0-beta.10-4905443",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.1",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  }

It's slow in Chrome, IE, and Edge

My system is a development laptop, core I7, SSD, 16gb RAM etc. Don't think it's the system that is slow.

Can anyone help me?

Edit: Added this browser performance measure: I think the issue is somewhere in the animations. It's running a few, and only this one already takes 1.2 seconds. It would be acceptable if it was smooth, but it isn't. Nothing is really smooth regarding material actually. Just can't explain it.

Added also an image of all that it's doing. Is this normal?

Answer 1

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).