I have been working on implementing mat-list-option within cdk-virtual-scroll-viewport in an Angular 14 project. I came across a demo project in Angular 11 that helped me set up this implementation.
In the Angular 11 demo, scrolling functions perfectly and selections of each item persist as expected even after scrolling.
However, when trying to replicate the same functionality in Angular 14, the selection is lost after scrolling, which is not the desired behavior.
Below is a snippet of the HTML template showcasing my implementation. The selectionChange binding manages selections by calling methods such as select and deselect from the SelectionModel found in the corresponding .ts file:
<mat-selection-list (selectionChange)="onSelectionChange($event)">
<cdk-virtual-scroll-viewport [itemSize]="20" class="example-viewport">
<mat-list-option
*cdkVirtualFor="let item of list;"
[value]="item"
[selected]="selection.isSelected(item)"
>{{item}}
</mat-list-option>
</cdk-virtual-scroll-viewport>
</mat-selection-list>
Additionally, the corresponding .ts file contains the SelectionModel, the list array containing dummy items, and the onCheckboxChange method used for the selectionChange output binding:
selection = new SelectionModel(true);
list = Array.from(Array(10000).keys());
onCheckboxChange(selection: MatSelectionListChange) {
const changedOptions = selection.options;
for (const option of changedOptions) {
if (option.selected) {
this.selection.select(option.value);
} else {
this.selection.deselect(option.value);
}
}
}
Despite extensive research and attempts with ChatGPT, I haven't been able to find a solution to make the functionality work seamlessly in an updated Angular version. Would you be able to assist in resolving this issue?
Feel free to explore the Stackblitz examples for both implementations and Angular versions below:
Angular 11 (Demo - Working as Expected): https://stackblitz.com/edit/virtual-scrolling-selection-list-mpawp4?file=src%2Fapp%2Flist-selection-example.html
Angular 14 (Not Functioning Correctly): https://stackblitz.com/edit/angular-b3c9dv-v3pya1?file=src%2Fapp%2Fdatepicker-overview-example.ts