Adding Infinite Scroll Functionality to Angular Material Select Component

Haidar Zeineddine — Wed, 18 Dec 2019 15:48:39 +0000

<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

Property	Description	Type	Default
`complete`	If `true`, the `infinitScroll` output will no longer be triggered	`boolean`	`false`
`threshold`	The threshold distance from the bottom of the options list to call the `infiniteScroll` output event when scrolled. The threshold value can be either in percent, or in pixels. For example, use the value of `10%` for the `infiniteScroll` output event to get called when the user has needs 10% to reach the bottom.	`string`	`'15%'`
`debounceTime`	The threshold time before firing the `infiniteScroll` event	`number`	`150`

Outputs

Property	Description	Type
`infinitScroll`	Emitted when the scroller inside the `mat-select` reaches the required distance	`EventEmitter<void>`

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

DEV Community: Haidar Zeineddine

Adding Infinite Scroll Functionality to Angular Material Select Component

Getting Started

Parameters

Inputs

Outputs