Virtual scrolling helpers / utilities.

[jelbourn]

Similar to the md-virtual-repeat in Angular Material 1.

[natcohen]

Would be good to implement dynamic height (angular/material#4314)

[elvisbegovic]

Does someone know a repo do this virtual scroll instead of ngFor ? Today we have a very large set of data, it's primordial to begin/HAVE this feature instead of something like "tooltip" or so ! @jelbourn Displaying big data is important today please begin with something hard instead of "tooltip"

ps: https://developers.google.com/web/updates/2016/07/infinite-scroller

[DennisSmolek]

@istiti Polymer has <iron-list> Here and Demos Here

Please recognize that you are asking about a feature that most projects don't need/use and is a technical challenge to put into a library in a fully formed, universal way... You could probably write your own version, but it might not be what I would need...

Tooltip is a super easy use case for portals and overlay's which are core to everything from menu's to dialogs so is rather simple to release and common enough that most use cases fit.

The link you gave has a link to his source code and it's only 400ish lines. I bet you could make a ng2 version and contributing it back to the community for free would be awesome!

[elvisbegovic]

@DennisSmolek "Infinite scrollers pop up all over the internet. Google Music’s artist list is one, Facebook’s timeline is one and Twitter’s live feed is one as well"
IMHO infinite scroll is technik people need to have to discharge their DOM! Still more today we have big data.

Update

Impossible to get iron list working (very comlpicate) if you have an github repo doing virtual Dom, you're welcome

[laserus]

@istiti Have you tried this https://github.com/vaadin/angular2-polymer

https://vaadin.com/blog/-/blogs/using-polymer-components-in-angular-2

[elvisbegovic]

yes but this add more complexities to my app ... really a bad choice but I find angular2-data-table which do work very awesome thanks

[elvisbegovic]

ETA?

[Klaster1]

I've ported the old one and wonder if I there's some form of spec available so I can align my implementation with it. The mdVirtualRepeat is almost (as in line-to-line) the same, but structural repeater had to be made by scratch based on ngFor and mdVirtualRepeat.

[bryanrideshark]

@Klaster1 , any chance you could fork material2 and add your work to the library? If there was at least an initial PR we could get some momentum going behind this.

[bryanrideshark]

ngx-datatable has an implementation of virtual scroll.

I wonder if that couldn't be easily brought in?

[savaryt]

@jelbourn
I've made a naive implementation of a templatizable-virtual-repeat that work great for basic use-cases.
However, the item repeated must have a fixed height.
For now the virtual-repeat only supports:
itemNumber * itemHeight / maxHeight of HTMLElement of the browser which is 33554400px in Chrome.
So the number of items to be virtualized is still limited and relative to their heights.

If this sounds good to you, I can make a PR with the initial version and if the components pleases most I can work on the maxHeight issue.

Let me know if you're interested.

[jelbourn]

@ThibaultSavary we want to explore solutions for non fix-sized items in material2.

[bryanrideshark]

@jelbourn is that the sort of thing that can be implemented in a version bump down the road? Variable height is a tricky issue to solve with virtual repeaters, and I'm not sure insisting upon its inclusion is a realistic goal.

If we could at least get feature parity with Angular Material 1.0, it would be a massive help; Our company is pretty dependent on md-virtual-repeat, and its lack of support in Angular Material 2.0 is a bit of a blocker for us to upgrade to Angular ^2.

To be sure, flexible height would be a great feature, I'm just not sure it's as much of a requirement as having virtual repeat in the first place.

[laserus]

@jelbourn I fully agree with @bryanrideshark for virtual scroll to be exact in height is not top priority. Exact position affects scrollbar position on the right, but normally it is only a visual effect.

[natcohen]

@bryanrideshark & @laserus I don't agree with you guys... if the team implements the v1 (from material 1), a better version will probably never be explored! The team's time is limited and they should focus on innovation rather than existing technologies

[elvisbegovic]

+1 for innovation

ps:wait this feature since 5 months

[ronwang01]

+1 for the flexible height.

[bryanrideshark]

@natcohen all of what will / will not happen is speculation unless we're actually decision makers in the matter, IE, core members of the team.

As this is a blocking issue for other things (autocomplete, md-select), would someone on the team be able to provide some sort of feedback as to where this issue stands?

[harivrdhn]

+1 for the flexible height

[robconrad]

+1 need this badly!

[amcdnl]

@byronsanchez - You can use it today in cdk-experimental

[kylecordes]

For the sake of us joining this years-old item late, can anyone point to any currently available code (presumably a combination of CDK experimental and outside code) which simultaneously provides the following?

• Uses mat-table and friends
• ... to comply closely with Material appearance
• virtual scrolling, that is, only have the detailed cell-by-cell DOM exists for visible rows
• infinite scroll, that is, can handle a row set of unknown length, where additional data is provided from outside (typically a server, but it wouldn't matter from the point of view of the grid implementation) as needed

?

[amcdnl]

@kylecordes - The next phase is to integrate this with the other components such as table and tree. Stay tuned for updates on that.

[manju-reddys]

@kylecordes Take a look here https://virtual-grid-mat.stackblitz.io/

[naveedahmed1]

Anyone tried it with Angular Universal?

[naveedahmed1]

Can anyone please confirm if the following features are supported in current implementation:

• 1. scrollTo(position) - scroll to the given scroll position
• 2. scrollToIndex(index) - scroll to the given index in the list

Secondly, is it necessary to set height of the cdk-virtual-scroll-viewport? In my case if I dont set the height it doesnt work properly.

[bsthilaire]

No idea for scrollTo/scrollToIndex.

I can answer for height. I set my virtual scroll viewport using flex layout and it work with no fixed size.

See this https://stackblitz.com/edit/angular-virtual-scroll-and-flex-layout-working

[naveedahmed1]

Thanks for sharing this @bsthilaire it seems that this solution doesn't work with autosize, I mean for dynamic heights.

[bsthilaire]

I modified my stackblitz for autosize and it's still working with flex-layout.

https://stackblitz.com/edit/angular-virtual-scroll-and-flex-layout-randomsize

[nasreddineskandrani]

I am doing tests on IE11 using stackblitz of @bsthilaire for now.

first bug:

Blank zone at the end of the scrollbar (sometimes) not present on CHrome and Edge

IE11 is glitchy. Do you prefer to have a dedicated Issue to track all problem about IE11? or do we go one by one with different issues?
--> i am going to try to fix this one next weekend.

[naveedahmed1]

@amcdnl it seems that the scrolling through arrow keys (up/down) doesn't work properly. It does scroll for few items and after that stops working.

To replicate the issue, open https://stackblitz.com/edit/angular-virtual-scroll-and-flex-layout-randomsize click on any element of the list and then use arrow keys to scroll.

cc @mmalerba

[bsthilaire]

@nasreddineskandrani The gap at the end is alread tracked by #11195

[nasreddineskandrani]

@bsthilaire thanks! i referenced this issue in the issue you mentionned. Since like that we can see the status here :).
If there is other issues opened not referenced here and you know about => please tag this issue the other side to be able to have a clear view on how mature this feature is. And also maybe help :)

[mmalerba]

I've been tracking all of the virtual scroll issues in this project: https://github.com/angular/material2/projects/20

Sorry for the lack of responsiveness, I just got back from a long vacation, will resume working on this now that I'm back

[naveedahmed1]

Anyone tried infinite scroll with cdk-virtual-scroll? I wanted to know what would be the best approach, I tried this:

<cdk-virtual-scroll-viewport #virtualViewport class="demo-viewport" autosize 
 (scroll)="onScroll($event)">

And

onScroll(e) {
   const viewHeight = e.target.offsetHeight // viewport: ~500px
   const scrollHeight = e.target.scrollHeight // length of all table
   const scrollLocation = e.target.scrollTop; // how far user scrolled

   // If the user has scrolled within 200px of the bottom, add more data
   const buffer = 200;
   const limit = scrollHeight - viewHeight - buffer;
   if (scrollLocation > limit) {
     this.loadList();
   }
 }

This seems to work, but has performance issues, so in order to optimize the performance I tried adding debounceTime.

@ViewChild('virtualViewport') public virtualViewport: ElementRef;

ngOnInit() {
    fromEvent(this.virtualViewport.nativeElement, 'scroll')
      .pipe(
        distinctUntilChanged(),
        debounceTime(250)
      )
      .subscribe((e) => {
        this.onScroll(e);
      });
  }

But this doesn't seems to work and throw below error

ERROR TypeError: Invalid event target
    at setupSubscription (fromEvent.js:50)
    at Observable._subscribe (fromEvent.js:24)

I also tried moving the code to ngAfterViewInit() but still same error.

[nasreddineskandrani]

I think this issue is growing too much. Devs are reporting here all bugs/questions.
@mmalerba is it fine? or can we use a better strategy?

Like closing this issue and let a message at the end to encourage devs open specific issues/questions... with in the tittle virtual-scroll: since i saw this pattern in all issues from the board you posted.

And maybe also having a specific ReadMe link under 'virtual-scroll' feature folder that document the virtual-scroll and giving a status about the feature.

[mmalerba]

I'm planning to leave this issue open until the virtual scroll is available in cdk (rather than cdk-experimental). If people have specific bugs they've encountered they should open a new issue. Discussion and troubleshooting should happen on Gitter, Stack Overflow, etc

[gshireesh]

I wrote a library for it in angualr 6. it uses cdk virtual component and supports end triggers.

check out: https://github.com/aprola/ngx-infinite-virtual-scroll
demo: https://aprola.github.io/ngx-infinite-virtual-scroll/
And Readme.md for instructions. If anyone likes it, ill would love to make documentation too.

[manju-reddys]

@gshireesh Your demo is not working

[gshireesh]

@manju-reddys thanks for pointing it out. I busted npm cache. now it works fine.

[lautarobock]

Do you think that this features could be used for virtualization of horizontal scrolling?

[jburson]

@mmalerba Is there ongoing work being done on this AutosizeVirtualScrollStrategy? It looks like the code has been stagnant for 3 months.

[JustasKuizinas]

Any news on autosize?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}