Angular Material Select Infinite Scroll

Adds missing infinite scroll functionality for the angular material select component

Inputs

| Property | Description | Type | Default |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------| ---------- |
| complete | If true, the infiniteScroll 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 | | ----------------- | --------------------------------------------------------------------------------------- | -------------------- | infiniteScroll | Emitted when the scroller inside the mat-select reaches the required distance | EventEmitter<void>

Installation

npm i ng-mat-select-infinite-scroll

Usage

StackBlitz working example

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>

Compatibility

• @angular/core: >=15 <16,
• @angular/cdk: >=15 <16,
• @angular/material: >=15 <16,
• rxjs: ^7.0.0

Contributions

Contributions are welcomed, feel free to open a Pull-Request or open a new issue.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

License

MIT