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

<mat-form-field>
  <mat-select placeholder="Choose a Doctor" formControlName="selectedDoc" (change)="drSelected()">
    <div *ngFor="let dr of doctors;let i = index" [matTooltip]="getDocDetail(i)" matTooltipPosition="right">
      <mat-option (scroll)="docScroll()" [value]="dr">
        {{dr.name}}
      </mat-option>
    </div>
  </mat-select>
  <mat-hint>List Of Doctor In Your city</mat-hint>
  <mat-error *ngIf="selectedDoc.hasError('required')">Please Select A Dr</mat-error>
</mat-form-field>

(scroll) don't work because mat-select don't have any scroll event any other way i can achieve this i want to show like 10 item first then populate the rest item when user scroll end of the options .

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:

<mat-form-field>
  <mat-select placeholder="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,...

Answer 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 class AppModule {
}

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-field appearance="outline">
    <mat-label>Select</mat-label>
    <mat-select msInfiniteScroll (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