Skip to content

Commit f8f2258

Browse files
HaidarZHaidarZ
committed
upgrade(15): beta release for angular v15 support.
1 parent b84fd5f commit f8f2258

File tree

5 files changed

+1856
-11677
lines changed

5 files changed

+1856
-11677
lines changed

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2022 Haidar Zeineddine
3+
Copyright (c) 2024 Haidar Zeineddine
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

+48-40
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11

22
# Angular Material Select Infinite Scroll
3-
4-
Adds missing infinite scroll functionality for the [angular material select component](https://material.angular.io/components/select)
5-
6-
3+
4+
Adds missing infinite scroll functionality for the [Angular Material Select component](https://material.angular.io/components/select).
5+
76
### Inputs
8-
9-
| Property | Description | Type | Default |
10-
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------| ---------- |
11-
| `complete` | If `true`, the `infiniteScroll` output will no longer be triggered | `boolean` | `false` |
12-
| `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%'` |
13-
| `debounceTime` | The threshold time before firing the `infiniteScroll` event | `number` | `150` |
14-
### Outputs
15-
| Property | Description | Type |
16-
| ----------------- | --------------------------------------------------------------------------------------- | --------------------
17-
| `infiniteScroll` | Emitted when the scroller inside the `mat-select` reaches the required distance | `EventEmitter<void>`
18-
19-
### Installation
207

21-
```
8+
| Property | Description | Type | Default |
9+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------| ---------- |
10+
| `complete` | If `true`, the `infiniteScroll` output will no longer be triggered. | `boolean` | `false` |
11+
| `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%'` |
12+
| `debounceTime` | The threshold time (in milliseconds) before firing the `infiniteScroll` event. | `number` | `150` |
13+
14+
### Outputs
15+
16+
| Property | Description | Type |
17+
| ----------------- | --------------------------------------------------------------------------------------- | --------------------- |
18+
| `infiniteScroll` | Emitted when the scroller inside the `mat-select` reaches the required distance. | `EventEmitter<void>` |
19+
20+
### Installation
21+
22+
```bash
2223
npm i ng-mat-select-infinite-scroll
2324
```
2425

25-
### Usage
26-
[StackBlitz working example](https://stackblitz.com/edit/ng-mat-select-infinite-scroll)
26+
### Usage
27+
28+
[StackBlitz working example](https://stackblitz.com/edit/ng-mat-select-infinite-scroll)
2729

28-
Import `MatSelectInfiniteScrollModule` inside the app.module.ts
30+
Import `MatSelectInfiniteScrollModule` inside the `app.module.ts`:
2931
```typescript
30-
import { MatFormFieldModule, MatSelectModule } from '@angular/material/select';
31-
import {MatSelectInfiniteScrollModule} from 'ng-mat-select-infinite-scroll';
32+
import { MatFormFieldModule } from '@angular/material/form-field';
33+
import { MatSelectModule } from '@angular/material/select';
34+
import { MatSelectInfiniteScrollModule } from 'ng-mat-select-infinite-scroll';
3235

3336
@NgModule({
3437
declarations: [
@@ -44,11 +47,10 @@ import {MatSelectInfiniteScrollModule} from 'ng-mat-select-infinite-scroll';
4447
providers: [],
4548
bootstrap: [AppComponent]
4649
})
47-
export class AppModule {
48-
}
50+
export class AppModule {}
4951
```
5052

51-
Then place the msInfiniteScroll directive on the `mat-select` component
53+
Then, place the `msInfiniteScroll` directive on the `mat-select` component:
5254
```html
5355
<mat-form-field appearance="outline">
5456
<mat-label>Select</mat-label>
@@ -58,28 +60,34 @@ Then place the msInfiniteScroll directive on the `mat-select` component
5860
</mat-form-field>
5961
```
6062

61-
### Compatibility
63+
> **Note:**
64+
> Update the `complete` property when the loaded data reaches the total available data to avoid unnecessary scroll triggers.
65+
> For older versions of Angular (<15), use version 4 of this library.
66+
67+
### Compatibility
68+
69+
This library supports Angular 15 and higher.
70+
* `@angular/core`: `>=15.0.0 <16`
71+
* `@angular/cdk`: `>=15.0.0 <16`
72+
* `@angular/material`: `>=15.0.0 <16`
73+
* `rxjs`: `^7.0.0`
6274

63-
* `@angular/core`: `>=6.0.0 <16`,
64-
* `@angular/cdk`: `>=6.0.0 <16`,
65-
* `@angular/material`: `>=6.0.0 <16`,
66-
* `rxjs`: `^7.0.0`
75+
### Contributions
6776

68-
### Contributions
69-
Contributions are welcomed, feel free to open a Pull-Request or open a new issue.
77+
Contributions are welcome! Feel free to open a Pull Request or create a new issue.
7078

71-
### Development server
79+
### Development Server
7280

73-
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.
81+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any source files.
7482

75-
### Build
83+
### Build
7684

77-
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.
85+
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.
7886

79-
### Running unit tests
87+
### Running Unit Tests
8088

81-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
89+
Run `ng test` to execute unit tests via [Karma](https://karma-runner.github.io).
8290

83-
# License
91+
### License
8492

85-
[MIT](LICENSE)
93+
[MIT](LICENSE)

0 commit comments

Comments
 (0)