4.0.0 • Published 2 years ago

ng-mat-select-infinite-scroll v4.0.0

Weekly downloads
5,040
License
MIT
Repository
github
Last release
2 years ago

Angular Material Select Infinite Scroll

Adds missing infinite scroll functionality for the angular material select component

Inputs

PropertyDescriptionTypeDefault
completeIf true, the infiniteScroll output will no longer be triggeredbooleanfalse
thresholdThe 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%'
debounceTimeThe threshold time before firing the infiniteScroll eventnumber150

Outputs

PropertyDescriptionType
infiniteScrollEmitted when the scroller inside the mat-select reaches the required distanceEventEmitter<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