Questions tagged angular-cdk-virtual-scroll

Explore the latest questions and answers asked by our top developers.

Angular CDK Scroll to Index 5 items too short

I am creating a new item for a list and want to scroll to it once it has saved. Currently it scrolls but is 5 items too short (i.e I have to scroll down another 5 items manually to see my item) I have played around with setRenderedContentOffset but this does not seem to make […]

Virtual scroll for Angular material table columns

I have a material table with around 1000 columns and I want to virtualize these columns, there are a lot of examples that show virtualization of rows using cdk-virtual-scroll but not for columns. Is there a way to do the virtualizations to columns. Source: Angular Material Quesions

Angular-Material: Auto-Complete + Virtuall Scroll lost the active item if i navigate with the Keyboard-Arrows

I have a problem with the autocomplete in combination with the virtual scroll. If I insert huge data into the virtual scroll and try to navigate through the list with the arrow keys, while moving the scrollview to the item – then the autocomplete looses the information about the active item. Stackblitz: I hope […]

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 bottom (in a custom DataSource<Item>): connect(collectionViewer: CollectionViewer): Observable<Item[]> { this.viewChanges = collectionViewer.viewChange.subscribe((listRange) => { this.loadItemsFor(listRange); }); .. } That […]

cdk-virtual-scroll-viewport scrollToOffset function can’t scroll to the bottom of viewport

I use virtual-croll-viewport for displaying content which changes after user actions. Before destroying a component user offset must be remebered and set again shortly after return to that component. So I have in onInit function: Subscription: this.virtualScroll.elementScrolled().subscribe(event => { console.log(‘current offset changed: ‘, this.virtualScroll.measureScrollOffset()) this.currentOffset = this.virtualScroll.measureScrollOffset(); }); ScrollToOffset method: console.log(‘current offset to set: ‘, […]

cdk-virtual-scroll-viewport doesn’t render correct amount of items

I am creating an Angular app for an imaginary supermarket (personal learning project) and I have in my db around 5000 products that I want to load in my app with an infinite scroll.. width cdk-virtual-scroll I manage to do it but I cant manage to tune the itemsize and maxBuffers/minBuffers correctly, the best results […]

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; } <cdk-virtual-scroll-viewport class="example-viewport"> <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div> </cdk-virtual-scroll-viewport> But i want the cdk-virtual-scroll-viewport to have wrap the content items if it is not reaching max height to appear scrollbar. […]

By rodent la
Categorized as angular, angular-cdk-virtual-scroll Tagged ,

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: <li *cdkVirtualFor="let post of postsList" class="post-item" #postItem> … TS: @ViewChildren("postItem") allPostsRef: QueryList<ElementRef>; . . […]

Scroll to bottom with cdk-virtual-scroll (Angular 8)

Goal Display a list of messages and scroll to bottom when a new message is received. Problem With virtual scroll I have to set the [itemSize] property, but for me it is not a static value: When a message is too long for one line it breaks in multiple, so its height changes. I have […]

Proper use of Virtual Scrolling with Angular Material and mat-tables?

Alright, so recently Ive been trying to migrate some of my table functionality over to using virtual scrolling,s imply 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 to use the Angular Material cdk virtual table scrolling directive on […]

1 2 3 4

Still Have Questions?

Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us