Virtual scrolling helpers / utilities.

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

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

@jelbourn

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

@istiti

@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!

@DennisSmolek

@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

@istiti

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

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

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

ETA?

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.

@Klaster1

@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.

ngx-datatable has an implementation of virtual scroll.

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

@ThibaultSavary

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

@jelbourn

@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.

@jelbourn

@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.

@nasreddineskandrani

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

@bsthilaire

@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 :)

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

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.

@mmalerba

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.

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

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.

@gshireesh

@gshireesh Your demo is not working

@manju-reddys

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

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

@mmalerba

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

Any news on autosize?

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.}

Navigation Menu

Repository navigation

Virtual scrolling helpers / utilities. #823

Update

70 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Virtual scrolling helpers / utilities. #823

Description

Activity

natcohen commented on Aug 30, 2016

elvisbegovic commented on Sep 24, 2016

DennisSmolek commented on Oct 5, 2016

elvisbegovic commented on Oct 6, 2016

Update

laserus commented on Nov 9, 2016

elvisbegovic commented on Nov 9, 2016

elvisbegovic commented on Nov 26, 2016

Klaster1 commented on Dec 23, 2016

bryanrideshark commented on Feb 14, 2017

bryanrideshark commented on Feb 14, 2017

jelbourn commented on Mar 8, 2017

bryanrideshark commented on Mar 8, 2017

laserus commented on Mar 8, 2017

70 remaining items

bsthilaire commented on Jul 10, 2018

nasreddineskandrani commented on Jul 10, 2018

mmalerba commented on Jul 10, 2018

naveedahmed1 commented on Jul 11, 2018

nasreddineskandrani commented on Jul 14, 2018

mmalerba commented on Jul 16, 2018

gshireesh commented on Jul 26, 2018

manju-reddys commented on Jul 26, 2018

gshireesh commented on Jul 27, 2018

lautarobock commented on Aug 17, 2018

jburson commented on Oct 30, 2018

JustasKuizinas commented on May 1, 2019

angular-automatic-lock-bot commented on Sep 10, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions