Adding Infinite Scroll Functionality to Angular Material Select Component

Tags: angular, matselect, infinitescroll, material
Published: 2019-12-18 15:48:39


>
`<mat-select>` is a form control for selecting a value from a set of options, similar to the native <select> element. You can read more about selects in the Material Design spec. It is designed to work inside of a <mat-form-field> element.
&mdash;&mdash;[Angular Material Docs](https://material.angular.io/components/select/overview)
>

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](https://github.com/HaidarZ/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

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

Import `MatSelectInfiniteScrollModule` inside the app.module.ts

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

```html
  <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](https://stackblitz.com/edit/ng-mat-select-infinite-scroll).

Don't forget to keep a star for my repository if you liked it :)
[ng-mat-select-infinite-scroll](https://github.com/HaidarZ/ng-mat-select-infinite-scroll)