angular-cdk-virtual-scroll

Virtual Scroll - enabled on condition

阅读更多关于 Virtual Scroll - enabled on condition

问题 I'm working on big data tables and I need to have oportunity to set dynamic if I want to use virtual scroll or standard solution. On my prototype I used *ngIf and duplicated views for standard body and cdk virtual scroll vierport. Is there any possibilty to just disable virtual scroll, without building additional components for alternate views? Thanks in advance! 回答1: I believe you are asking for adding the virtual scroll directive based on a condition. In that case, it cannot be done at the

Virtual Scroll - enabled on condition

阅读更多关于 Virtual Scroll - enabled on condition

Angular virtual scroll: append new items when reaching the end of scroll

阅读更多关于 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 template: <div class="container"> <cdk-virtual-scroll-viewport itemSize="100"> <li *cdkVirtualFor="let item of searchResult">{{item}}</li> </cdk-virtual-scroll-viewport> </div> Here is my attempts to make it to work as I need: export class

Angular Virtual scroll performance issue on overriding scrollbar styles

阅读更多关于 Angular Virtual scroll performance issue on overriding scrollbar styles

来源： https://stackoverflow.com/questions/62811427/angular-virtual-scroll-performance-issue-on-overriding-scrollbar-styles

Obtaining a static component reference within a cdk-virtual-scroller? (References are recycled)

阅读更多关于 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 suggests. Live MCVE on StackBlitz (updated to reflect EDIT 1). EDIT 1 A colleague reminded me that we're now using named references instead of ViewChildren() , like so: HelloComponent (inside the *cdkVirtualFor ): @Component({ selector: 'hello', template: `

How to implement Virtual scroll on material tree grand child level

阅读更多关于 How to implement Virtual scroll on material tree grand child level

问题 I have an angular mat-tree with parent, child and grand child level. On clicking of child I am adding grandchild in it. But grandchild having huge data upto 4k records. Which is making tree extremely slow. My code as below <div *ngIf="isGrandChildLoaded"><mat-spinner></mat-spinner></div> <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> <!-- use a disabled button

How to programmatically scroll to item with angular's material virtual scroll?

阅读更多关于 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 comes from the server and is again highlighted. My code looks like <cdk-virtual-scroll-viewport itemSize="40" class="wrapper"> <div *cdkVirtualFor="let item of list" [class.selected]="item.id === selectedItem.id"> </div> </cdk-virtual-scroll-viewport> The problem is that if a select an item that is down in the list, it is highlighted, but I have to

How to programmatically scroll to item with angular's material virtual scroll?

阅读更多关于 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 comes from the server and is again highlighted. My code looks like <cdk-virtual-scroll-viewport itemSize="40" class="wrapper"> <div *cdkVirtualFor="let item of list" [class.selected]="item.id === selectedItem.id"> </div> </cdk-virtual-scroll