cdkVirtualScroll does not work properly with matAccordion and matExpansionPanel.
The accordion does not respect the expansion state of individual expansion panels as you scroll.
The expansion state is maintained as you scroll
If you expand the xth item in the accordion then as you scroll, the xth in the view will always be expanded. ie if you expand the 3rd item then as you scroll down to say the 1000th item then the 1003rd item will be expanded.
Able to use expansion panels inside virtual scroll
Angular 7.0
Material 7.0
MacOS 10.14
TypeScript 3.x
Browser Chrome 70.0
No
Looks like this is happening because the virtual scroll is reusing the template, which has a state that is not being reset.
As a workaround you can set the template cache size for the cdkVirtualFor to 0 and since the template is not reused, it works as expected.
<mat-expansion-panel *cdkVirtualFor="let item of items, templateCache = 0">
<mat-expansion-panel *cdkVirtualFor="let item of items; templateCacheSize: 0">
works as a work around
@trevorsmiley
<mat-expansion-panel *cdkVirtualFor="let item of items; templateCacheSize: 0">
Its not quiet good, because when u scroll with open element, everything is jumping.... When will be the fix for that @mmalerba
For now its not possible to use CDK virtual scroll with Angular Material Ui
@mmalerba any updates on this issue?
??
??
any updates on this issue?
+1
any update? :)
Still waiting for an update. It's been almost 2 years.
Most helpful comment
works as a work around