DEV Community

loading...

Adding Infinite Scroll Functionality to Angular Material Select Component

haidarz profile image Haidar Zeineddine ・2 min read

<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

Discussion

pic
Editor guide
Collapse
shivamvarshney profile image
shivamvarshney

Actually I have used this msInfiniteScroll with Mat-Select. For Rendering, it is working fine, but in case of edit that field, I am unable to show value selected(Suppose that value comes in 3rd page(Comes while scrolling)).

Collapse
ahmad_shkr profile image
Ahmad Shokor

Good Job πŸ‘

Collapse
Sloan, the sloth mascot
Comment deleted