Skip to main content
119 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
0 votes
0 answers
62 views

I am using Angular CDK Virtual Scroll together with Ionic Grid to render a list of cards. The requirement is: On mobile, show 2 cards per row. On tablet/desktop, show 3 cards per row. Support ...
Mrunal Misale's user avatar
  • 1
0 votes
0 answers
78 views

I’m implementing a multi-select dropdown using Angular Material’s <mat-select multiple> and cdk-virtual-scroll-viewport for performance with large datasets. Problem: When I select multiple ...
i_m_kalidas's user avatar
  • 1
0 votes
1 answer
120 views

I am trying to use mat-autocomplete with large data. For the large data aspect im using a cdk-virtual-scroll-viewport with mat-autocomplete. Everything works except the Arrow-Key Navigation. <mat-...
Fabian's user avatar
  • 3
1 vote
1 answer
179 views

I have a <mat-select> displaying 100k items in a <cdk-virtual-scroll-viewport> and I would like to test it: <mat-select hideSingleSelectionIndicator [formControl]="selectedItem&...
fservantdev's user avatar
  • 941
1 vote
0 answers
86 views

I'm using a separate CDK virtual scroll viewport for the header and need to keep it synchronized with the main row viewport. Currently, I'm using the elementScrolled event of the row viewport to track ...
Ashley Colaco's user avatar
  • 21
0 votes
0 answers
287 views

I use CDK virtual scroll to optimize the display of my data. I've even tested CDK experimental with autosizing, which obviously doesn't work in Angular 18. My items have a minimum size of 26px, which ...
KRdg's user avatar
  • 45
0 votes
1 answer
625 views

I am using cdk virtual scroll appendOnly mode with angular 13, but its jerking on scroll. <cdk-virtual-scroll-viewport appendOnly class="container-fluid table-grid h-100 ...
ab_qayyum's user avatar
  • 102
0 votes
1 answer
1k views

I'm implementing CDK Virtual Scrolling for a large list, and while scrolling works smoothly with just minBufferPx, I'm having issues when adding maxBufferPx. Without it, I get this console error: ...
Lucas_Nt's user avatar
  • 136
1 vote
0 answers
258 views

I use Angular CDK table(ver. 15) to build a large table. I want to improve the preformance by using cdk-virtual-scroll-viewport. how can i combain the *cdkRowDef of CDK table with *cdkVirtualFor of ...
Dor Levi's user avatar
  • 371
2 votes
1 answer
461 views

On using cdk-virtual-scroll-viewport in Angular SSR app and adding scrollWindow attribute, I am getting the following error:- document is not defined at _CdkVirtualScrollableWindow (...\...
Sidharth Bajpai's user avatar
  • 360
1 vote
1 answer
2k views

It has been days that I am trying to fix some angular 15 code but I can't find the solution. I am using a mat-select(Legacy) with ngx-mat-select-search and virtual scroll cdk-virtual-scroll-viewport. ...
help me code's user avatar
  • 161
1 vote
1 answer
2k views

I have an Angular16 Application that is using Angular's CDK virtual scrolling module - https://material.angular.io/cdk/scrolling/overview. The components being scrolled (lets say ProductComponent) ...
sfaulkner's user avatar
  • 13
0 votes
0 answers
359 views

I've the following code: <cdk-virtual-scroll-viewport #scrollSection id="scrollSection" [itemSize]="generalSettings.rowHeight" [attr.data-...
Ali's user avatar
  • 1,688
0 votes
1 answer
257 views

I just did a carousel like component and I used it like a child in a parent component that passes it an Observable. Here is the code, first the child: <div #container *ngIf="name && (...
David's user avatar
  • 1
1 vote
1 answer
2k views

I'm using CDK virtual scrolling to display a list of items on a page. Worst case scenario for number of items is around 2K. I'm using the default fixed size scrolling strategy. The source for the data ...
Georgi Rangelov's user avatar
  • 307
1 vote
0 answers
265 views

Fast scroll with cdk-virtual-scroll-viewport shown empty spaces, any solution with Angular15+ ?
Suneet Bansal's user avatar
  • 2,706
0 votes
0 answers
134 views

We have requirement to show grid which can have 1500 rows and each row can have update 150 columns This grid is implemented using angular mat-table, on-load entire grid is read only Problem is, when ...
naveen's user avatar
  • 11
2 votes
2 answers
676 views

Currently I am using CDK virtual scroll in the DOM, but when scrolling fast there is glitch happening in the DOM , so I am planning to implement the Pull to refresh method, so how to implement this ...
Vinu PR's user avatar
  • 263
0 votes
0 answers
577 views

I have problem with cdkVirtualFor with FormArray. It doesn't generate any items. My html: <cdk-virtual-scroll-viewport [itemSize]="100" class="viewport-container" [...
Horsebye's user avatar
  • 15
2 votes
0 answers
91 views

I've installed the VsCode Angular Language Service Extension and I enabled strictTemplates in my .tsconfig. It works almost like a charm. But I have a strange case. If you take a look at the images ...
bjoern.stark's user avatar
  • 21
3 votes
0 answers
322 views

I am using angular material library virtual scroll widget 'cdk-virtual-scroll-viewport' and am able to load data in paginated basis on the scroll of it. But here am facing a problem, how I can show ...
A DEv's user avatar
  • 339
0 votes
2 answers
2k views

@ViewChild('scroller') scroller!: CdkVirtualScrollViewport; constructor(private ngZone: NgZone) { } ngAfterViewInit(): void { this.unsub = this.scroller.elementScrolled().pipe( map(()...
Anand Raja's user avatar
  • 3,216
0 votes
1 answer
1k views

I am using an expansion panel inside cdk-virtual-scroll. In the header of the expansion panel, I have to show 4 values, which is causing a delay of nearly one second in rendering items while scrolling....
Kaleem Ullah's user avatar
  • 36
0 votes
0 answers
790 views

cdk-virtual-scroll-viewport is not working properly when I use more than two cdk-virtual-scroll-viewport in the same page. Stackblitz example In the above example, first dropdown is working properly. ...
jenifer's user avatar
  • 3
1 vote
2 answers
2k views

In my angular application, I want to keep my table header at fixed position and display the scrollbar to the body part only. I am using CdkVirtualScrollViewport library from angular to plot the table ...
Bhushan Khaladkar's user avatar
  • 622
1 vote
1 answer
2k views

i am using angular virtual scroll in project so when ever i am scrolling it down items are loading but flickering for micro sec trying with maxBufferPx and minBufferPx and positions to fix but not ...
venu dev's user avatar
  • 21
0 votes
1 answer
725 views

I have a cdk-virtual-scroll-viewport in my application where height and width are provided in percentage. <div class="wrapper"> <cdk-virtual-scroll-viewport itemSize="5&...
Kugesh Rajasekaran's user avatar
  • 336
2 votes
2 answers
2k views

I've upgraded my Angular project dependencies: @angular/core: ^14.2.9 @angular/cdk: ^14.2.9 @angular/material: ^14.2.6 ngx-infinite-scroll: ~14.0.1 And after that, the infinite scroll (with ...
Sergiu Molnar's user avatar
  • 1,040
1 vote
2 answers
10k views

I have an angular material table that has millions of records, I have added pagination which has options like 10, 25, 50, 100, 500, and 1000, and the max length of the records, which I select 1000 or ...
Shinchan's user avatar
  • 113
5 votes
1 answer
2k views

I have faced similar problem like this one https://github.com/angular/components/issues/16330#issuecomment-514591282 , but it happened not only while scrolling but when I tried filtering data. I used ...
Tamás Köböl's user avatar
  • 65
1 vote
1 answer
2k views

I'm trying to implement Angular Material virtual scrolling, but my items have different sizes. So I must code a custom implementation of VirtualScrollStrategy. The thing is, I need to use the ...
ssubtil's user avatar
  • 11
4 votes
1 answer
4k views

TLDR: have a list of items that need to be in a virtual scroll. It works fine, but only takes up ~30% of the space available until the screen size is changed. (make the dev tools larger). On initial ...
Aaron Nebbs's user avatar
  • 576
1 vote
1 answer
1k views

I have a virtual scroll element within an Angular Material Sidenav but it seems this causes the virtual scroll to render incorrectly. I suspect that because the scroll is created "off screen"...
Mad Eddie's user avatar
  • 1,267
2 votes
2 answers
6k views

I'm working on Angular cdk virtual viewport. Is there any way to automatically adjust height of scroll viewport? So in my case When viewport size increases there is a blank space displays at the ...
Prasad Tawde's user avatar
  • 23
2 votes
1 answer
2k views

I am using cdk-virtual-scroll. It is working fine without using the css property scroll-snap-type . When I use scroll-snap-type it is flickering few seconds. herewith I attached the code sample https:...
bCliks's user avatar
  • 2,998
1 vote
0 answers
1k views

Row Group feature works well until I set virtual scrolling to true it stops working. I inspected the table element and found that the group header row totally disappears in virtual scrolling mode. I ...
Hoàng Nguyễn's user avatar
  • 1,182
0 votes
3 answers
6k views

I have a large set of data that needs virtual scrolling and I use PrimeNg v13.4.0 with angular/cdk v13.3.7. I have exactly the same issue with PrimeNg demo. When scrolling down, the sticky header ...
Hoàng Nguyễn's user avatar
  • 1,182
3 votes
0 answers
890 views

I would like to build the attached functionality, where I have around 20k items. I have tried mat cdk virtual scroller, but it is not working as it provides a single column with a horizontal scroll. ...
Ankit Malik's user avatar
  • 31
0 votes
1 answer
2k views

I'm using CDK VIRTUAL SCROLL in a table that loads a service (API) that returns me a list, with this list I can remove or return their columns respectively as well as their items, but when I remove ...
user avatar
1 vote
1 answer
2k views

I am currently trying to understand the concepts of virtual scrolling and for that I extensively used the Angular documentation on Angular's CDK. I found out that they implemented virtual scrolling ...
zettee's user avatar
  • 147
0 votes
2 answers
2k views

I am using cdk-virtual-scroll-viewport to build pagination scroll in my app. I have two instances of cdk-virtual-scroll-viewport, Want to track individual scroll events and make API call for the ...
Rohit Mehrotra's user avatar
  • 29
0 votes
0 answers
620 views

I am getting list of "incident_ids" from a HTTP get call as shown in the ts file and populating in the HTML in the mat-nav-list. Problem is mat-nav-list inside cdk-virtual-scroll-viewport ...
kethan bravo's user avatar
  • 93
2 votes
0 answers
2k views

I'm using cdk virtual scrolling in an Angular project with Ng-zorro. I have a list of collapse component and in that list is where I use the virtual scrolling. The problem is that when I open a ...
borjaj's user avatar
  • 69
1 vote
2 answers
2k views

https://stackblitz.com/edit/angular-ngx-virtual-scroller-byykpn Here is what I have done so far, now I need to Expand/Collapse all divs which is after the group header.
jay khatri's user avatar
  • 149
1 vote
1 answer
1k views

I installed CDK Virtual Scroller in my ionic 5.3.3 project: npm add @angular/cdk The version is: "@angular/cdk": "^13.0.2" The scroller viewport wraps a ion-item-group: <ng-...
dancingbush's user avatar
  • 2,281
4 votes
1 answer
3k views

The Angular Material cdk-virtual-scroll-viewport property is not working correctly for nested *cdkVirtualFor or *ngFor. The viewport is split into two and the scroll does not work as expected. Please ...
reegan29's user avatar
  • 932
2 votes
0 answers
3k views

According to the official documentation of angular virtual scrolling minBufferBx and maxBufferPx Supposed that we have the following parameters: itemSize = 50, minBufferPx = 100, maxBufferPx = 250. ...
rodent_la's user avatar
  • 1,425
2 votes
0 answers
1k views

I currently have a use case where I would like to extend the CdkVirtualScrollViewport component so I could have access to its rendered template. The specific case is that the base template renders a &...
Marcelo Tedeschi's user avatar
  • 21
2 votes
0 answers
867 views

I have found a number of tutorials for using the cdk-virtual-scroll-viewport, but there is one thing missing from every single tutorial I have found so far: how do I tell the viewport how many items ...
Trevortni's user avatar
  • 758
0 votes
1 answer
657 views

I have a table component which is contained inside cdk-virtual-scroll-viewport. One of the column cell contains '..more' option that expands the entire row. But when scrolled up/down the row ...
Raajkumar's user avatar
  • 907

1
2 3