How To Use Scroll Event In Angular Material Mat Select?

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 event. &

Solution 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:

<mat-form-field><mat-selectplaceholder="Choose a Doctor" #doctorSelect>
                                            ^^^^^^^^^^^^^ 
    <mat-option *ngFor="let dr of viewDoctors;let i = index">
      {{dr}}
    </mat-option></mat-select></mat-form-field>

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

Solution 2:

To this date, infinite scroll for mat-select component is still not available and kept as an open issue. Meanwhile, have a look at ng-mat-select-infinite-scroll, you can use it to lazy load your data.

import { MatFormFieldModule, MatSelectModule } from'@angular/material';
import {MatSelectInfiniteScrollModule} from'ng-mat-select-infinite-scroll';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatSelectModule,
    MatSelectInfiniteScrollModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export classAppModule {
}

Component

  total = 100;
  data = Array.from({length: this.total}).map((_, i) => `Option ${i}`);
  limit = 10;
  offset = 0;
  options = new BehaviorSubject<string[]>([]);
  options$: Observable<string[]>;

  constructor() {
    this.options$ = this.options.asObservable().pipe(
      scan((acc, curr) => {
        return [...acc, ...curr];
      }, [])
    );
  }

  ngOnInit() {
    this.getNextBatch();
  }

  getNextBatch() {
    const result = this.data.slice(this.offset, this.offset + this.limit);
    this.options.next(result);
    this.offset += this.limit;
  }

Template

<mat-form-fieldappearance="outline"><mat-label>Select</mat-label><mat-selectmsInfiniteScroll (infiniteScroll)="getNextBatch()" [complete]="offset === data.length"><mat-option *ngFor="let option of options$ | async" [value]="option">{{option}}</mat-option></mat-select></mat-form-field>

Here's a working example

Solution 3:

Building on Kim's answer, the scroll height and top can be used to detect when the user has reached the bottom of the dropdown (See this SO question)

I also updated the logic to load the next 10 records on scroll in case the full dataset was too large to load in one shot.

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSelect } from '@angular/material/select';

@Component({
  selector: 'toolbar-multirow-example',
  templateUrl: 'toolbar-multirow-example.html',
  styleUrls: ['toolbar-multirow-example.css']
})
export classToolbarMultirowExampleimplementsOnInit{
  allDoctors = Array.from(new Array(3000).keys()).map(i => 'Doctor ' + i);
  viewDoctors = this.allDoctors.slice(0, 10);
  viewIndex = 0;
  windowSize = 10;  
  private readonly PIXEL_TOLERANCE = 3.0;
  @ViewChild('doctorSelect') selectElem: MatSelect;

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

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

  loadNextOnScroll(event) {    
    if (this.hasScrolledToBottom(event.target)) {
      console.log('Scrolled to bottom');
      this.viewIndex += this.windowSize;      
      this.viewDoctors = this.allDoctors.slice(0,this.viewIndex);      
    }
  }

  private hasScrolledToBottom(target): boolean {    
    return Math.abs(target.scrollHeight - target.scrollTop - target.clientHeight) < this.PIXEL_TOLERANCE;
  }

  reset() {
    this.viewDoctors = this.allDoctors.slice(0, 10);
  }
}

Find the working example here