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

user_869033 0
Viewed 11190

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?

enter image description here enter image description here

angular-material2 material-design angular-material angular
2 Answers

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.

user_47611690
Related