Press "Enter" to skip to content

Infinite Scroll Directive For Angular Material Selection Component

Angular Material Select Infinite Scroll adds the missing infinite scroll functionality to the Angular Material Select component.

react infinite scroll component example, infinite scroll in react js functional component, ng select infinite scroll example, infinite scroll angular

JQuery Plugin That Enables Infinite Scrolling With AJAX | infinityScroll.js

How to make use of it:

Installation:

npm i ng-mat-select-infinite-scroll

Import MatSelectInfiniteScrollModule inside 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 put 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>

Angular Material Select Infinite Scroll Plugin/Github


See Demo And Download

Official Website(HaidarZ): Click Here

This superior jQuery/javascript plugin is developed by HaidarZ. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *