how to use scroll event in angular material mat select?

Question

i have a large list and i want to load it as the user scroll down the select field but how can i get the scroll event in mat-select there is no event that fire the scroll ev

Answer 1

Check out the Stackblitz I created.

In your component, get the MatSelect via ViewChild to access its scrollable panel. Then add an event listener to the panel, which reloads the doctors and updated the viewDoctors array when the scrollTop position exceeds a certain threshold.

allDoctors = ['doctor', 'doctor', ..., 'doctor'];
viewDoctors = this.allDoctors.slice(0, 10);

private readonly RELOAD_TOP_SCROLL_POSITION = 100;
@ViewChild('doctorSelect') selectElem: MatSelect;

ngOnInit() {
  this.selectElem.onOpen.subscribe(() => this.registerPanelScrollEvent());
}

registerPanelScrollEvent() {
  const panel = this.selectElem.panel.nativeElement;
  panel.addEventListener('scroll', event => this.loadAllOnScroll(event));
}

loadAllOnScroll(event) {
  if (event.target.scrollTop > this.RELOAD_TOP_SCROLL_POSITION) {
    this.viewDoctors = this.allDoctors;
  }
}

Don't forget to assign your mat-select to a variable in your template so that you can access it via ViewChild:

  
                                            ^^^^^^^^^^^^^ 
    
      {{dr}}
    
  

This is only a very basic setup illustrating the idea. You might want to do show a loading animation, cleanup the event listener,...