Questions tagged [angular-cdk-virtual-scroll]
116 questions
19
votes
2 answers
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 the end of the viewport scrolling down.
Here is my…
smartmouse
- 13,912
- 34
- 100
- 166
17
votes
1 answer
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 server. When I refresh the page, the selected item…
Mateut Alin
- 1,173
- 4
- 17
- 34
10
votes
1 answer
Angular virtual scroll strategy for different fixed-size items
I'm displaying an infinite, virtual scroll using Angular's cdk-virtual-scroll-viewport. The functionality doesn't rely on anything special from it, besides subscribing for the view position, in order to load new elements when the user scrolls to the…
Milan Milanov
- 412
- 1
- 8
- 27
10
votes
2 answers
PrimeNG dropdown with virtual scroll not keeping selection in view
I am making use of the PrimeNG drop down component with custom filtering and virtual scroll enabled.
I am finding the component is not scrolling back to the last selection made in the list of items in view when it's re-opened, instead it just…
mindparse
- 6,115
- 27
- 90
- 191
9
votes
4 answers
Scroll to bottom with cdk-virtual-scroll (Angular 8)
Goal
Display a list of messages and scroll to the bottom when a new message is received, even when I am at the top. I would like to scroll fully bottom even with elements of different heights.
Problem
With virtual scroll, I have to set the…
adrisons
- 3,443
- 3
- 32
- 48
7
votes
1 answer
Maintain scroll position with CDK autosize virtual scroll strategy
Maintain scroll position with CDK autosize virtual scroll strategy
I have a large list of items that can be scrolled with provided by @angular/cdk-experimental (the items have dynamic heights, thus I'm using…
Ulrich Lehner
- 108
- 2
- 7
6
votes
2 answers
angular cdk virtual viewport setting dynamic height
When using the cdk virtual viewport, need to set the height of the viewport
.example-viewport {
height: 800px;
width: 100%;
border: 1px solid black;
}
rodent_la
- 1,195
- 4
- 18
- 38
6
votes
2 answers
cdk virtual scrolling with sticky header html table angular
I am getting more than 30000 records from backend to list in frontend, So using cdk-virtual-scroll I can able to achieve this. I have created normal table enclosed with cdk-tag
…
Kavya Shree
- 1,014
- 2
- 17
- 52
6
votes
1 answer
Obtaining a static component reference within a cdk-virtual-scroller? (References are recycled)
We recently transitioned our scrollable lists to CDK Virtual Scroller. (Angular 7.2.12 with angular/cdk 7.3.7)
In short, it seems that the VirtualScrollViewport is recycling component instances, not just the template as the documentation…
msanford
- 11,803
- 11
- 66
- 93
5
votes
0 answers
scroll not working while pressing navigation up/down button in cdk-virtual-scroll-viewport
I am using cdk-virtual-scroll-viewport in my mat-autocomplete. scroll works fine whenever scroll using mouse but not working whenever pressing keydown button.
Expected Behavior:
If the focus goes beyond the visible viewport, the list should…
venkatesh karthick
- 335
- 3
- 12
4
votes
0 answers
Proper use of Virtual Scrolling with Angular Material and mat-tables?
Alright, so recently I've been trying to migrate some of my table functionality over to using virtual scrolling, simply because the DOM is being bogged down with hundreds of nodes all at once with large data sets.
That being said, I was just going…
kmanrulze
- 97
- 1
- 10
4
votes
0 answers
Angular material table detect Scroll
I'm using Angular Material Table and want to detect when user scrolls the table. For this, I'm using cdkScrollable.
app-my-component:
constructor(private scrollDispatcher: ScrollDispatcher)…
