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

Question

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 scroll down to the list to see it. I want to programmatically scroll down to it when that item comes from the server.

I the docs there is a scrollToIndex method. Where I can find an instance of FixedSizeVirtualScrollStrategy, so I can call this method?

Jota.Toledo · Accepted Answer · 2019-05-05 11:54:09Z

35

Sure, you will need to get a reference to the CdkVirtualScrollViewport instance.

@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;

scrollToMiddle(){
  this.viewPort.scrollToIndex(list.length/2, "smooth");
}

An example can be found in this stackblitz

For the requirement of scrolling to the index of the selected element in the list, you could do the following:

ngAfterViewInit(){
  const selectedIndex = this.list.findIndex(elem => elem.id === this.selectedItem.id);
   if(selectedIndex > -1){
     this.viewPort.scrollToIndex(selectedIndex);
   }
}

Note: this assumes that the list is already loaded during the ngAfterViewInit lifehook. As you havent provided more information about how the list value is set, this is the best that I can provide.

edited May 5, 2019 at 11:54

answered Feb 6, 2019 at 10:29

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

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

5 Comments

Mateut Alin Over a year ago

Thanks! Just one short question: what if I have two lists? (Duplicate the list in the template in the stackblitz example) How can I scroll the second one?

Jota.Toledo Over a year ago

You will need to bind either through a specific child reference as explained here blog.angular-university.io/angular-viewchild section Using @ViewChild to inject a reference to the DOM element of a component

Mateut Alin Over a year ago

And by the way... Why did you called the method on a CdkVirtualScrollViewport object? It supposed to be called on a FixedSizeVirtualScrollStrategy object

Jota.Toledo Over a year ago

AFAIK the FixedSizeVirtualScrollStrategy is an implementation detail and you cant directly access it in this case. The closest that you could get to it would by by binding the viewport with the CdkFixedSizeVirtualScroll instead of CdkVirtualScrollViewport, but I dont see any advantage from it in this use case.

anirudh talluri Over a year ago

@Jota.Toledo How to scroll to a particular element like HTML elements inside cdk scroll instead of list?

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related