Questions tagged [angular-cdk-virtual-scroll]
81 questions
0
votes
1 answer
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;
}
![](../../users/profiles/3733534.webp)
rodent_la
- 781
- 1
- 11
- 29
0
votes
0 answers
Angular cdkVirtualFor not working well with ViewChildren, QueryList has 6 items
I'm using cdkVirtualFor in my app to handle large amounts of data instead of the traditional *ngFor. I need to add a class to a certain element which I have the index of in the main postsList
This is the HTML:
![](../../users/profiles/1895488.webp)
Alex
- 1,836
- 3
- 33
- 60
0
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…
![](../../users/profiles/5949565.webp)
kmanrulze
- 27
- 7
0
votes
0 answers
How to handle large selection for copy-paste in angular material virtual scroll?
I have large dataset(60000+) for angular material virtual scroll
The scrolling is working but the problem is when I want to copy large section while scrolling down/up,
virtual scroll will destroy the elements which are not in the view anymore, that…
![](../../users/profiles/8680586.webp)
Ragnar
- 151
- 1
- 6
0
votes
1 answer
Add an Item to a cdkVirtualFor
I am using a cdkVirtualFor due to a large number of users in my list. The list has filtering on it and it works much better when it is a cdkVirtualFor rather than a regular *ngFor.
I now need to add items to the list…
![](../../users/profiles/4867472.webp)
Bwizard
- 723
- 8
- 18
0
votes
0 answers
Fixing 1st column inside table with cdk virtual scroll
I have a table with tbody and various and cells. I have implemented CDK Virtual scroll because of many rows. I have to freeze the 1st column with horizontal scroll and my horizontal scroll is on cdk component container rather than inside tbody or…
![](../../users/profiles/12899660.webp)
sachin hajare
- 21
- 1
0
votes
0 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
…
![](../../users/profiles/5850635.webp)
Kavya Shree
- 882
- 1
- 12
- 45
0
votes
0 answers
How to detected when user stop scrolling with Virtual Scroll - Angular 9
I want to display a message when the user stop scrolling with the Virtual Scroll. I tried the following approach, but the message i want to display never appear when i stop scrolling.
this.scrollDispatcher.scrolled().pipe(
tap(() => this.scroll =…
![](../../users/profiles/7157577.webp)
Kivo
- 317
- 5
- 19
0
votes
1 answer
Angular virtual scroll: prepend new items when new data streams in with Microsoft SignalR
Currently I'm using Microsoft SignalR for live updates on my data and whenever new data comes in, I would like it to be added to the existing virtual list while removing that entry from where it was.
Essentially how do you unshift with virtual…
![](../../users/profiles/4424660.webp)
Nick Persad
- 21
- 2
0
votes
0 answers
Using variables inside cdk-virtual-scroll-viewport brakes virtual scroll
I need to put some blocks inside cdk-virtual-scroll-viewport and access this blocks outside of viewport.
When i am doing that the virtual scroll is…
![](../../users/profiles/8235861.webp)
Kiko
- 43
- 1
- 6
0
votes
0 answers
Angular virtual scroll with sticky column and header
I have a big list of data and I want to display it in a grid, but I don't want to display the whole list as it will be too much stuff on screen and be slow. I want to use a virtual scroll but I want to have the header and the first column to be…
![](../../users/profiles/5071149.webp)
charles-emile begin lavigne
- 679
- 1
- 6
- 17
0
votes
1 answer
position:fixed doesn't work inside cdk-virtual-scroll-viewport
HTML element with position:fixed doesn't work inside cdk-virtual-scroll-viewport.
Below style should put the element at the page top left corner, but this class doesn't apply to elements inside cdk-virtual-scroll-viewport.
.fixed-div {position:…
![](../../users/profiles/3755048.webp)
V_R
- 56
- 6
0
votes
2 answers
Performance issue with selecting a checkbox in HTML table with 1000+ rows
We have a simple HTML table with tr td combination . The table has 65 columns to it and it will have minimum of 1000 rows and it could be more as well.
We are seeing a huge performance issue when selecting a checkbox in a row, it takes around 3-4…
![](../../users/profiles/4853102.webp)
Nikhil Bharadwaj
- 701
- 2
- 15
- 36
0
votes
0 answers
CDK Virtual scroll weird behavior on checking the width of table
I have user angular material's CDK virtual scroll for virtual. The virtual scroll fetches values of table data from a function. In the end of function I check the width of table which is inside virtual scroll by…
![](../../users/profiles/12899660.webp)
sachin hajare
- 21
- 1
0
votes
1 answer
Make sort work with CdkVirtualFor and templateCacheSize
I have implemented CdkVirtualForOf on a list in Angular, and set its templateCacheSize to 150 to improve perfomance.
But when I sort my data and scroll, the cached templates screws up the items in the view. In other words: I sort the data, and the…
![](../../users/profiles/3668625.webp)
MartinJH
- 2,460
- 5
- 31
- 44