Cdk virtual-scroll inside mat-select for mat-option

Question

Has anyone been able to use virtual-scroll inside mat-select as shown below ?

Answer 1

I think i have solved this:

https://stackblitz.com/edit/angular-gs4scp

The key things are when the mat select opens panel we trigger cdkVirtualScrollViewPort scroll and check view port size.

  openChange($event: boolean) {
    console.log("open change", $event);
    if ($event) {
      this.cdkVirtualScrollViewPort.scrollToIndex(0);
      this.cdkVirtualScrollViewPort.checkViewportSize();
    } else {
    }
  }

Where we get the reference to the virtual scroll viewport using @ViewChild

@ViewChild(CdkVirtualScrollViewport, { static: false })
  cdkVirtualScrollViewPort: CdkVirtualScrollViewport;

Other relevant pieces in the template are are pretty simple:-

    
    
      {{ itemTrigger }}
    
        
            {{item}}
        
    
    Justa hint