2

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?

Marius Kazlauskas
  • 221
  • 4
  • 24

1 Answers1

1

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

ahmeticat
  • 1,899
  • 1
  • 13
  • 28
  • Thanks for a quick answer, actually I don't see a difference, checkbox animation still is hang/freeze... maybe have any other ideas? – Marius Kazlauskas Jun 29 '19 at 11:19
  • Yes, setTimeout solve the problem, but maybe is there some other way? because user need wait extra 500ms for see items. If there are no other possibilities, I will acept this answer later – Marius Kazlauskas Jun 29 '19 at 12:10
  • You can use waiting gif,if you can. like updating answer link – ahmeticat Jun 29 '19 at 12:19