how manage the scrollToIndex method with angular's material virtual scroll

Question

Could you tell me how manage the scrollToIndex (virtuall scroll) if my list is not loaded during the ngAfterViewInit lifehook? I need to call the scroll to the index when I m redirect from an other page, so in the ts file. So my goal is to point to the right index when the page is loaded

@ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;
ngOnInit() {
...
this.getData(index);
}

getData(index){
return this.service.get().subscribe(data => {
this.fullDatasource = data;
this.selectedIndex = this.fullDatasource.findIndex(value => value.id === index);
}

ngAfterViewInit() {
this.viewport.scrollToIndex(this.selectedIndex);
}

Nothing happens, if I call the method in the ngAfterViewInit. Many many thnaks in advance.

Johannes G. · Accepted Answer · 2020-08-11 08:22:55Z

2

You could try running the scrollToIndex in a setTimeout function, i think this triggers another round of change detection, by then your list could be loaded. Another way to archive this is to use the ChangeDetectorRef, see the official docs for details on how this works.

Or trigger the scroll manually in the subscription of the getData method instead of AfterViewInit.

edited Aug 11, 2020 at 8:22

answered Aug 10, 2020 at 13:22

Johannes G.

2753 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BabeteOne Over a year ago

Many thanks Johannes, it does work with a set timeout in the getData but I feel like I'm doing something wrong. Will it work if I have a very large dataset (100K) for example?

Johannes G. Over a year ago

I think it would still work, because you just trigger one additional change detection round, no matter how big the data is. Another way to trigger another change detection round would be using the ChangeDetectorRef and calling detectChanges.

sixmajeen · Accepted Answer · 2020-08-11 06:48:18Z

0

I wonder if virtual scroll makes sense in this case. Concerning the timeout, is it good to put it in knowing that the virtual scroll is designed to handle very large dataset ?

answered Aug 11, 2020 at 6:48

sixmajeen

1

Collectives™ on Stack Overflow

how manage the scrollToIndex method with angular's material virtual scroll

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related