How to fix mat-checkbox animation hang/freeze when content is rendering in Angular2+?

user_5741044 0
Viewed 642

I use mat-checkbox (angular material UI 7.2) in my Angular 7 application. There are some site content generations when I click mat-checkbox. There are only 10 ngFor items (complex) in my real application.

<mat-checkbox (change)="onChange()">Check me! (bad animation)</mat-checkbox>
<span *ngFor="let item of items">
    {{item}}
</span>

I make a very simplified example with many ngFor simple items to demonstrate my problem.

  public items = [];

  public onChange(){
    for (let i = 0; i < 10000; i++) {
      this.items.push(i);
    }
  }

This example you can find here:

https://stackblitz.com/edit/angular-material-design-kq3s3a

When I click mat-checkbox, animation of checkbox hang and looks very bad. Is there a possibility to fix this mat-checkbox hang/freeze animation in this situation?

angular-animations angular-material angular
1 Answers

You can use ChangeDetectorRef in @angular/core.

Using ChangeDetectorRef like that,

add detector in your constructor 

constructor(....,
    private cdr:ChangeDetectorRef) { }

and this.cdr.detectChanges() where you want

example

user_80900140
Related