# ng-mat-select-infinite-scroll

> Adds missing infinite scroll functionality for the angular material select component

Latest version **5.0.0-beta.3** (published 2025-06-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-mat-select-infinite-scroll
pnpm add ng-mat-select-infinite-scroll
yarn add ng-mat-select-infinite-scroll
bun add ng-mat-select-infinite-scroll
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.0-beta.3 |
| Published | 2025-06-26 |
| First published | 2019-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 79.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 49 |
| Author | Haidar Zeineddine |
| Maintainers | haidarz |
| Keywords | angular, angular-material, mat-select, infinite-scroll, scroll, select, material, directive |

## Links

- npm: https://www.npmjs.com/package/ng-mat-select-infinite-scroll
- Repository: https://github.com/HaidarZ/ng-mat-select-infinite-scroll
- Issues: https://github.com/HaidarZ/ng-mat-select-infinite-scroll/issues
- npm.io page: https://npm.io/package/ng-mat-select-infinite-scroll

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 5.0.0-beta.3 (latest) — 2025-06-26
- 5.0.0-beta.2 — 2025-03-15
- 5.0.0-beta.1 — 2024-12-22
- 4.0.0 — 2022-08-24
- 3.0.1 — 2021-11-09
- 3.0.0 — 2021-06-01
- 2.1.1 — 2020-08-07
- 2.1.0 — 2020-08-07
- 2.0.0 — 2019-12-16
- 1.2.1 — 2019-11-25
- 1.2.0 — 2019-11-23
- 1.1.0 — 2019-07-20
- 1.0.1 — 2019-02-22
- 1.0.0 — 2019-02-19

## README

# Angular Material Select Infinite Scroll  

Adds missing infinite scroll functionality for the [Angular Material Select component](https://material.angular.io/components/select).  

### 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 pixels. For example, `10%` triggers the event 10% before the bottom. | `string`  | `'15%'`    |  
| `debounceTime` | The threshold time (in milliseconds) 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  

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

### Usage  

[StackBlitz working example](https://stackblitz.com/edit/ng-mat-select-infinite-scroll)  

Import `MatSelectInfiniteScrollModule` inside the `app.module.ts`:  
```typescript
import { MatFormFieldModule } from '@angular/material/form-field';
import { 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>
```

> **Note:**  
> Update the `complete` property when the loaded data reaches the total available data to avoid unnecessary scroll triggers.  
> For older versions of Angular (<15), use version 4 of this library.

### Compatibility  

This library supports Angular 15 and higher.  
* `@angular/core`: `>=15.0.0 <16`  
* `@angular/cdk`: `>=15.0.0 <16`  
* `@angular/material`: `>=15.0.0 <16`  
* `rxjs`: `^7.0.0`  

### Contributions  

Contributions are welcome! Feel free to open a Pull Request or create 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 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 unit tests via [Karma](https://karma-runner.github.io).  

### License  

[MIT](LICENSE)

---
_Source: https://npm.io/package/ng-mat-select-infinite-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._