bug(Cdk virtual scroll): Cdk virtual scroll not working properly with compareWith

[ilapavuluri]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

Steps to reproduce:

1. I found a serious problem with *cdkVirtualFor, this improved the performance but breaking my functionality, in my selection-list, I will select options by checking the check-box like in the below image, if I select a option and scroll down and scroll up again I am losing the selection.

{{cio.label}}

compareFunction = (option1:string, option2:string)=> option1===option2;

Expected Behavior

What behavior were you expecting to see?

Actual Behavior

What behavior did you actually see?

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[jelbourn]

Unfortunately the cdk's virtual scrolling isn't yet integrated with existing Angular Material components; you can follow #10122

[ilapavuluri]

Hi Jelbourn,

Thanks for the response, I have more than 1000 records, without virtual scroll it is very slow, is there any alternate solution?

Appreciate your help.

Thanks
Ashok.

[Splaktar]

@ilapavuluri sorry for the delay in taking a look at this.

You will probably want to either find

1. a way to not include all of your records in the at one time list (implement some kind of pagination) without *cdkVirtualFor or
2. use *cdkVirtualFor along with a custom component (i.e. remove your use of MatSelectionList) and custom class for handling your UI state

The first option is likely the easiest (and MatTable with MatPaginator might be helpful), but your API will have to support paging.

[ilapavuluri]

Thank you so much Michael for your response.

Thanks
Ashok.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}