Adding Infinite Scroll Functionality to Angular Material Select Component

<mat-select> is a form control for selecting a value from a set of options, similar to the native element. You can read more about selects in the Material Design spec. It is designed to work inside of a element.
——Angular Material Docs

MatSelect API is robust having vast capabilities, but there's an issue here.
What if my DATASET is very large, should I load it all into my mat-select component.
Sure not , it'll slow down my app!
My data should be lazy loaded i.e. I load part of my data and do load more when I only need it. In case of select controls, things must be done as of infinite scroll manner , where you load extra content when you reach the bottom of the options scroll panel.

That's why I've created the angular library ng-mat-select-infinite-scroll to handle big dataset issues with angular material select.

If you're familiar with angular , this library is easy to use , it represents an angular directive with some input properties.

Getting Started

npm i ng-mat-select-infinite-scroll --save

Import MatSelectInfiniteScrollModule inside the 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 place 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>

In the above example , whenever we reach the bottom of the select panel , infiniteScroll event will be called and it will still doing that until
the complete input is set to true.

Suppose that you have a paginated API, you'll keep fetching until the count of options in the select is equal the total number of the resource.

Parameters

Inputs

Outputs

For a full example , please have a look at StackBlitz working example.

Don't forget to keep a star for my repository if you liked it :)
ng-mat-select-infinite-scroll