CODEWITHSUNDEEP
javascriptangulartypescriptangular-material
Timuçin Çiçek
Timuçin Çiçek

Reputation: 1626

How can I maintain selections of 'mat-list-option' within 'cdk-virtual-scroll-viewport?

I have an implementation of mat-list-option to be used inside cdk-virtual-scroll-viewport. The actual project I'm working on is based on Angular 14. However, to achieve this implementation, I found a demo project in Angular 11.

In this demo project, scrolling works great, and selections of each item are remembered on each scroll as expected.

However, the same approach for Angular 14 doesn't work as expected. After a selection and scrolling, the selection is gone.

Below is the HTML template to give you an idea of my implementation. The selectionChange binding handles each selection and calls the select and deselect methods of the SelectionModel, which you can find in the .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>

Below, you can find the .ts file, which includes the SelectionModel object to interact with the mat-selection list, handle selections, the list variable to manage lots of 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);
      }
    }
  }

I have conducted extensive research and used ChatGPT to solve the issue here, but I couldn't find anything useful. Can you help me make this work as expected in an up-to-date Angular version?

Here you can find the Stackblitz examples of each implementation and Angular version.

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 working as Expected) : https://stackblitz.com/edit/angular-b3c9dv-v3pya1?file=src%2Fapp%2Fdatepicker-overview-example.ts

Upvotes: 0

Views: 532

Answers (1)

D A
D A

Reputation: 2072

To improve rendering performance, *cdkVirtualFor caches previously created views after they are no longer needed. When a new view would normally be created, a cached view is reused instead. The size of the view cache can be adjusted via the templateCacheSize property; setting this size to 0 disables caching. If your templates are expensive in terms of memory you may wish to reduce this number to avoid spending too much memory on the template cache.

<mat-selection-list (selectionChange)="onCheckboxChange($event)">
<cdk-virtual-scroll-viewport [itemSize]="48" class="scroll-viewport">
<div *cdkVirtualFor="let item of list;templateCacheSize: 0">
  <mat-list-option      
    [selected]="selection.isSelected(item)"
    [value]="item"
    class="custom-list-option">{{ item }}</mat-list-option>
</div>
</cdk-virtual-scroll-viewport>
</mat-selection-list>

Upvotes: 1

Related Questions