Angular mat-checkbox performance issue

Question

I have a mat-list with a mat-checkbox next to each list item. The list is about 700-800 element long. Whenever I click the checkbox there's a huge delay between the check-mark appearing and clicking it. Any ideas what might cause it? I read it that Angular iterates through every element even if only one is getting changed due to change detection, but even if that's the case, I don't know how to avoid this problem.

<mat-list>
    <mat-list-item *ngFor="let listItem of productList">    
        <span (click)="selectProduct(listItem)">
            <div matLine>{{listItem.name}}</div>
            <div matLine>{{listItem.desc}}</div>
        </span>
        <mat-checkbox class="example-margin check-box" name="listItem.name" [(ngModel)]="listItem.checked"></mat-checkbox>
        <mat-divider></mat-divider>
        </mat-list-item>
</mat-list>

UPDATE

Using ChangeDetectorRef and .detectChanges() whenever a click event is called, fixed it.

Answer 1

I have generated some code for you with 700 mat-checkboxes. It takes less than half a second to click with Chrome 73.0.3683.86. Yes, it could be faster, but angular material was never about performance, it was about UI.

Example is here.