https://github.com/haidarz/ng-mat-select-infinite-scroll
Infinite Scroll directive for angular material select component
https://github.com/haidarz/ng-mat-select-infinite-scroll
angular angular-material infinite infinite-scroll mat-select material scroll select
Last synced: 5 months ago
JSON representation
Infinite Scroll directive for angular material select component
- Host: GitHub
- URL: https://github.com/haidarz/ng-mat-select-infinite-scroll
- Owner: HaidarZ
- License: mit
- Created: 2019-02-16T23:25:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-06-26T14:03:34.000Z (12 months ago)
- Last Synced: 2025-10-04T05:57:37.166Z (8 months ago)
- Topics: angular, angular-material, infinite, infinite-scroll, mat-select, material, scroll, select
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-mat-select-infinite-scroll
- Size: 1.07 MB
- Stars: 50
- Watchers: 3
- Forks: 20
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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` |
### 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
Select
{{option}}
```
> **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)