Skip to content

HaidarZ/ng-mat-select-infinite-scroll

Repository files navigation

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: >=6.0.0 <16,
  • @angular/cdk: >=6.0.0 <16,
  • @angular/material: >=6.0.0 <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