Virtual scrolling helpers / utilities.

[jelbourn]

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

[manju-reddys]

My 2 cents, virtual list should handle the following:

• Dynamic height.

• No limit on number of elements in the list: Every browser have max pixel limit, so if list element height say 50px the max elements can be rendered would be approximately 214749 elements (considering the lowest max pixels). Read the article here

      const div = document.createElement('div');
      const style = div.style;
      style.position = 'absolute';
      style.left = '99999999999999px';
      style.top = '9999999999999999px';
      document.body.appendChild(div);
  
      const size = div.getBoundingClientRect()[left ? 'left' : 'top'];
      document.body.removeChild(div);
      return size;        
  }
   /* Example outputs
       Firefox: 33554400px
       Chrome:  33554428px
       Opera:   33554428px 
       IE Edge:10737418.23px / IE 9: 21474836.47px
   */

• Support both vertical and horizontal scrolling.
• Should allow filtering.
• Dynamic list size (number of elements).
• Scroll to element if user input the element index.

I potentially see the two solutions angular material team can consider or refer to the one mentioned in the above article (this solution can't handle dynamic height) and another here which can handle dynamic height too).

[John-Ender]

I've really enjoyed working with the angular2-virtual-repeat interface. It's easy to understand and implementation is a breeze.

A request I have for the interface would be an easy way to shift the elements in the viewport by an integer to support arrow key and page up/down navigation. I have a use case where users can select an item in the list and can use the aforementioned keys to change the selection. A challenge is keeping the selected item always visible in the viewport. This would ideally operate similar to how the material2 autocomplete component works for arrow key navigation.

I've implemented this with angular2-virtual-repeat's scrollInto function, so an option like that would also work.

[Toxicable]

If it helps here are two different implementations of Virtual scrollers I made a little while ago just to see how the different methods might be implemented. Intersection Observer https://stackblitz.com/edit/angular-virtual-scroll-passive Scroll watcher + manual height calcs https://stackblitz.com/edit/angular-virtual-scroll

Reload the preview window when you open them up

Just note these are very buggy and have issues, I made these to experiment not as a final product.

[ghost]

Ionic and Iron-List both have Grouping / Divider. Grid support would be also great (recalculation on resize - means absolute position).

The most advanced virtual scroll implementation I saw up to date is Google Photos

• Grid support - images
• Variable width !
• Grouping

The best available one is iron-list.

[jonasalberton]

@jelbourn Any updates on this?

I implemented an infinite scroll behavior, where every time the scroll comes to the end of the list I make a request for my server and load more information and give an append in my list, however when passing 400 records my list gets very slow . Any idea what I can do?

the implementation was done natively, without using external libraries!

Sorry for my english, it's not my first language.

[jorroll]

@Jonas-Ceolin-Alberton you can check out the projects page > virtual scrolling project in this repo for the WIP on this issue. It's being actively worked on.

[jonasalberton]

thank you @thefliik !

[EdmondChuiHW]

@Component({
  selector: 'my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css'],
  providers: [],
  changeDetection: ChangeDetectionStrategy.OnPush
})

For anyone stumbling upon this thread via Google because your mat-table freezes, you can try updating changeDetection to OnPush. In my case, I have a lot of *ngIfs in my rows, and profiling in Chrome shows that Angular is trying to check for changes for a minute or so (I have about 900 rows). Using OnPush fixes this problem.

Of course, it's not a silver bullet to all mat-table performance issues, but it might be worth a try in your project. With this option enabled, you might be required to inject ChangeDetectorRef and call markForCheck()/detectChanges() yourself. See @PascalPrecht's helpful article for more details: https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

[amcdnl]

Here is a demo of the virtual scroll with autosize for those interested - https://stackblitz.com/edit/autosize-gap-scroller-ftwx3x

[naveedahmed1]

@amcdnl Thanks for sharing this, I think all the elements are already added in DOM. I believe in virtual scroll the elements should be added dynamically depending on available space.

[amcdnl]

I think all the elements are already added in DOM

No they arent...Did you look at the DOM? Only visible + buffer.

[naveedahmed1]

Yes, Please take a look:

[takamori]

The first time I loaded the stackblitz I saw the behavior reported by naveed, but later on when I reloaded, I no longer saw the issue. I didn't investigate further but presumed either there are some outstanding bugs here, or that there was some weird caching issue on stackblitz's end.

[jorroll]

I can second @naveedahmed1 experience. Using chrome's inspector, I count 50+ divs matching .cdk-virtual-scroll-content-wrapper > div in the dom---which appears to be all of the possible virtual scroll elements. Though maybe I'm misunderstanding something. (using chrome 66).

(also, each of the divs contain content in them)

[takamori]

Weird; when I first load it it has all the elements as reported by @naveedahmed1 . But if I change the stackblitz to have a loop to 1000 instead of 10 then it behaves the way @amcdni says it should. And if I then click Fork and reload the stackblitz, it gets lots of errors in the console (altho it doesn't have the extra elements anymore).

[jorroll]

@takamori ah, ok. I'm able to replicate that. If I increase the loop to 1000 it starts behaving as expected.

[elvisbegovic]

weird problems when i increase

[amcdnl]

Yes, it is very very experimental so bugs are expected. cc @mmalerba

[gerardcarbo]

In the final release it will be possible to specify the total size of the data set, like in the AngularJs virtual repeater (getLength())? This way the scroll bar can be initially sized to allow an easy access to any part of the data set.

[byronsanchez]

+1, can't wait til this is ready :)

[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 https://github.com/angular/material2/pull/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[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.}