Angular Material Select Infinite Scroll adds the missing infinite scroll functionality to the Angular Material Select component.

How to make use of it:

Installation:

npm i ng-mat-select-infinite-scroll

Import MatSelectInfiniteScrollModule inside app.module.ts.

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

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

Then put the msInfiniteScroll directive on the mat-select component.

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

See Demo And Download

Official Website(HaidarZ): Click Here

This superior jQuery/javascript plugin is developed by HaidarZ. For extra Advanced Usage, please go to the official website.