Questions tagged [virtualscroll]
A UI technique dedicated to increase the performance of large scrollable lists by rendering only a small portion of the data at a moment and virtualising other parts of the dataset, so that the scrollbar parameters remain consistent and a user experiences the result interface close to the original one (without virtualisation)
virtualscroll
10
questions
20
votes
5
answers
20k
views
Angular: cdkVirtualFor not rendering new items
I'm building a vertically scrolling calendar. I'm getting the initial days to load, but when new days are added to the list, they aren't being rendered.
<cdk-virtual-scroll-viewport
class="demo-...
- 1,843
18
votes
1
answer
29k
views
How to programmatically scroll to item with angular's material virtual scroll?
I have a list that has many items and each item can be selected. For this I use Angular Material Virtual Scroll. When an item is selected, the selected item is highlighted and then is saved on the ...
- 1,263
9
votes
4
answers
32k
views
virtual scroll on Angular 7 is not visible - the height is zero by default
Scenario:
Tried a basic virtual scroll test reading this blog post
the array had lots of items
there was no error
the list loaded in a virtual scroll but the height of it was 0 by default
quick fix ...
- 14.9k
8
votes
1
answer
9k
views
cdk virtualscroll with mat-grid-list
Is there a virtual scroll implementation that works with the grid-list? I think the default implementation won't work because each row should have an element around it.
I'm using the grid-list to ...
- 7,009
22
votes
8
answers
36k
views
cdk-virtual-scroll-viewport with variable item heights
I would like to use cdk-virtual-scroll-viewport in a TimeLine view with items of different heights.
So setting itemSize="x" which, according to the documentation refers to The size of the items in ...
- 14.4k
20
votes
2
answers
29k
views
Angular virtual scroll: append new items when reaching the end of scroll
I would like to use virtual scroll on my Angular application. The items in my list are the result of a remote paged search. I would like to load more results (call the next page) every time I reach ...
- 14.2k
7
votes
3
answers
4k
views
How to set the initial index (position) for the CdkVirtualScrollViewport in Angular 7
I need the inital position of the cdk-virtual-scroll-viewport to be other than the first element / item of the list.
Now I found the scrollToIndex and scrollTo methods, but I only can get them to ...
- 676
3
votes
2
answers
11k
views
Adjust height of dropdown menu Angular7 autocomplete with virtual-scroll
I'm using angular-material Autocomplete (version 7) for my application. I'm using <cdk-virtual-scroll-viewport> inside . Besides numerious problems I've resolved, there is one I don't understand:...
- 43
2
votes
1
answer
2k
views
Angular Virtual scroll performance issue on overriding scrollbar styles
I'm using cdk-virtual-scroll-viewport to apply virtual scrolling. Unfortunately, after applying styles to the scrollbar, scrolling is not smooth anymore. The native (right side) scrollbar is flashing ...
- 1,102
1
vote
1
answer
1k
views
ng2-dragula with a virtual scroll
I am trying to implement ngx-virtual-scroll and ng2-dragula
together
here is my current Stackblitz UPDATED : Stackblitz
The problem is the following :
<virtual-scroller #scroll2 [id]="...
- 7,320