I am facing an issue with a mat-list that contains a mat-checkbox next to each list item. The list is quite large, around 700-800 elements long.
There seems to be a significant delay between clicking the checkbox and seeing the check-mark appear. I suspect Angular is iterating through all elements even if only one is being changed due to change detection. However, I am unsure of how to resolve this issue.
<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
The issue was resolved by using ChangeDetectorRef and calling .detectChanges() whenever a click event occurs.