43 |
44 |
45 | ### Backers
46 |
47 | Thank you to all our backers! [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
48 |
49 | 
50 |
51 |
52 | ### Sponsors
53 |
54 | Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor))
55 |
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 |
67 |
--------------------------------------------------------------------------------
/projects/ngx-infinite-scroll/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contribute
2 |
3 | ## Introduction
4 |
5 | First, thank you for considering contributing to ngx-infinite-scroll! It's people like you that make the open source community such a great community! 😊
6 |
7 | We welcome any type of contribution, not only code. You can help with
8 | - **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
9 | - **Marketing**: writing blog posts, howto's, printing stickers, ...
10 | - **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...
11 | - **Code**: take a look at the [open issues](issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them.
12 | - **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/ngx-infinite-scroll).
13 |
14 | ## Your First Contribution
15 |
16 | Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
17 |
18 | ## Submitting code
19 |
20 | Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests.
21 |
22 | ## Code review process
23 |
24 | The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.
25 | It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you?
26 |
27 | ## Financial contributions
28 |
29 | We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/ngx-infinite-scroll).
30 | Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
31 |
32 | ## Questions
33 |
34 | If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!).
35 | You can also reach us at hello@ngx-infinite-scroll.opencollective.com.
36 |
37 | ## Credits
38 |
39 | ### Contributors
40 |
41 | Thank you to all the people who have already contributed to ngx-infinite-scroll!
42 |
43 |
44 |
45 | ### Backers
46 |
47 | Thank you to all our backers! [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
48 |
49 |
50 |
51 |
52 | ### Sponsors
53 |
54 | Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor))
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "ngx-infinite-scroll": {
7 | "projectType": "library",
8 | "root": "projects/ngx-infinite-scroll",
9 | "sourceRoot": "projects/ngx-infinite-scroll/src",
10 | "prefix": "lib",
11 | "architect": {
12 | "build": {
13 | "builder": "@angular-devkit/build-angular:ng-packagr",
14 | "options": {
15 | "project": "projects/ngx-infinite-scroll/ng-package.json"
16 | },
17 | "configurations": {
18 | "production": {
19 | "tsConfig": "projects/ngx-infinite-scroll/tsconfig.lib.prod.json"
20 | },
21 | "development": {
22 | "tsConfig": "projects/ngx-infinite-scroll/tsconfig.lib.json"
23 | }
24 | },
25 | "defaultConfiguration": "production"
26 | },
27 | "test": {
28 | "builder": "@angular-devkit/build-angular:karma",
29 | "options": {
30 | "main": "projects/ngx-infinite-scroll/src/test.ts",
31 | "tsConfig": "projects/ngx-infinite-scroll/tsconfig.spec.json",
32 | "karmaConfig": "projects/ngx-infinite-scroll/karma.conf.js"
33 | }
34 | }
35 | }
36 | },
37 | "demo": {
38 | "projectType": "application",
39 | "schematics": {
40 | "@schematics/angular:application": {
41 | "strict": true
42 | }
43 | },
44 | "root": "projects/demo",
45 | "sourceRoot": "projects/demo/src",
46 | "prefix": "app",
47 | "architect": {
48 | "build": {
49 | "builder": "@angular-devkit/build-angular:application",
50 | "options": {
51 | "outputPath": {
52 | "base": "dist/demo"
53 | },
54 | "index": "projects/demo/src/index.html",
55 | "polyfills": ["zone.js"],
56 | "tsConfig": "projects/demo/tsconfig.app.json",
57 | "assets": [
58 | "projects/demo/src/favicon.ico",
59 | "projects/demo/src/assets"
60 | ],
61 | "styles": [
62 | "projects/demo/src/styles.css"
63 | ],
64 | "scripts": [],
65 | "browser": "projects/demo/src/main.ts"
66 | },
67 | "configurations": {
68 | "production": {
69 | "budgets": [
70 | {
71 | "type": "initial",
72 | "maximumWarning": "500kb",
73 | "maximumError": "1mb"
74 | },
75 | {
76 | "type": "anyComponentStyle",
77 | "maximumWarning": "2kb",
78 | "maximumError": "4kb"
79 | }
80 | ],
81 | "fileReplacements": [
82 | {
83 | "replace": "projects/demo/src/environments/environment.ts",
84 | "with": "projects/demo/src/environments/environment.prod.ts"
85 | }
86 | ],
87 | "outputHashing": "all"
88 | },
89 | "development": {
90 | "optimization": false,
91 | "extractLicenses": false,
92 | "sourceMap": true,
93 | "namedChunks": true
94 | }
95 | },
96 | "defaultConfiguration": "production"
97 | },
98 | "serve": {
99 | "builder": "@angular-devkit/build-angular:dev-server",
100 | "configurations": {
101 | "production": {
102 | "buildTarget": "demo:build:production"
103 | },
104 | "development": {
105 | "buildTarget": "demo:build:development"
106 | }
107 | },
108 | "defaultConfiguration": "development"
109 | },
110 | "extract-i18n": {
111 | "builder": "@angular-devkit/build-angular:extract-i18n",
112 | "options": {
113 | "buildTarget": "demo:build"
114 | }
115 | },
116 | "test": {
117 | "builder": "@angular-devkit/build-angular:karma",
118 | "options": {
119 | "main": "projects/demo/src/test.ts",
120 | "polyfills": "projects/demo/src/polyfills.ts",
121 | "tsConfig": "projects/demo/tsconfig.spec.json",
122 | "karmaConfig": "projects/demo/karma.conf.js",
123 | "assets": [
124 | "projects/demo/src/favicon.ico",
125 | "projects/demo/src/assets"
126 | ],
127 | "styles": [
128 | "projects/demo/src/styles.css"
129 | ],
130 | "scripts": []
131 | }
132 | }
133 | }
134 | }
135 | },
136 | "cli": {
137 | "analytics": false
138 | },
139 | "schematics": {
140 | "@schematics/angular:component": {
141 | "type": "component"
142 | },
143 | "@schematics/angular:directive": {
144 | "type": "directive"
145 | },
146 | "@schematics/angular:service": {
147 | "type": "service"
148 | },
149 | "@schematics/angular:guard": {
150 | "typeSeparator": "."
151 | },
152 | "@schematics/angular:interceptor": {
153 | "typeSeparator": "."
154 | },
155 | "@schematics/angular:module": {
156 | "typeSeparator": "."
157 | },
158 | "@schematics/angular:pipe": {
159 | "typeSeparator": "."
160 | },
161 | "@schematics/angular:resolver": {
162 | "typeSeparator": "."
163 | }
164 | }
165 | }
166 |
--------------------------------------------------------------------------------
/projects/ngx-infinite-scroll/src/tests/services/scroll-resolver.spec.ts:
--------------------------------------------------------------------------------
1 | import * as Models from '../../models';
2 | import * as ScrollResolver from '../../lib/services/scroll-resolver';
3 |
4 | describe('Manage Scroll State', () => {
5 | it('should backup old Total and update the new one', () => {
6 | const state = {
7 | totalToScroll: 10,
8 | lastTotalToScroll: 0
9 | } as any;
10 | const newTotal = 20;
11 | ScrollResolver.updateTotalToScroll(newTotal, state);
12 | const actual = state.totalToScroll;
13 | const expected = newTotal;
14 | expect(actual).toEqual(expected);
15 | });
16 |
17 | it('should return false when total != lastTotal', () => {
18 | const state = {
19 | totalToScroll: 10,
20 | lastTotalToScroll: 0
21 | } as any;
22 | const actual = ScrollResolver.isSameTotalToScroll(state);
23 | expect(actual).toBeFalsy();
24 | });
25 |
26 | it('should return true total = lastTotal', () => {
27 | const state = {
28 | totalToScroll: 10,
29 | lastTotalToScroll: 10
30 | } as any;
31 | const actual = ScrollResolver.isSameTotalToScroll(state);
32 | expect(actual).toBeTruthy();
33 | });
34 |
35 | [
36 | {
37 | it: 'should set the triggered to down',
38 | down: true,
39 | state: {
40 | triggered: { down: 0 }
41 | } as Models.IScrollState,
42 | prop: 'down'
43 | },
44 | {
45 | it: 'should set the triggered to up',
46 | down: false,
47 | state: {
48 | triggered: { up: 0 }
49 | } as Models.IScrollState,
50 | prop: 'up'
51 | }
52 | ].forEach(spec => {
53 | it(spec.it, () => {
54 | const total = 1000;
55 | ScrollResolver.updateTriggeredFlag(total, spec.state, true, spec.down);
56 | // @ts-ignore
57 | const actual = spec.state.triggered[spec.prop];
58 | expect(actual).toBe(total);
59 | });
60 | });
61 |
62 | describe('shouldFireScrollEvent() - DOWN', () => {
63 | const distance: Models.IScrollerDistance = {
64 | down: 2
65 | };
66 | const scrollingDown = true;
67 | it('should scroll when scrolled to the up', () => {
68 | const container: Models.IPositionStats = {
69 | height: 500,
70 | scrolled: 400,
71 | totalToScroll: 900
72 | };
73 | const actual = ScrollResolver.shouldFireScrollEvent(
74 | container,
75 | distance,
76 | scrollingDown
77 | );
78 | const expected = true;
79 | expect(actual).toBe(expected);
80 | });
81 |
82 | it('should NOT scroll when NOT scroll pass distance point', () => {
83 | const container: Models.IPositionStats = {
84 | height: 500,
85 | scrolled: 100,
86 | totalToScroll: 800
87 | };
88 | const actual = ScrollResolver.shouldFireScrollEvent(
89 | container,
90 | distance,
91 | scrollingDown
92 | );
93 | const expected = false;
94 | expect(actual).toBe(expected);
95 | });
96 |
97 | it('should NOT scroll when NOT scroll pass distance point', () => {
98 | const container: Models.IPositionStats = {
99 | height: 500,
100 | scrolled: 0,
101 | totalToScroll: 800
102 | };
103 | const actual = ScrollResolver.shouldFireScrollEvent(
104 | container,
105 | distance,
106 | scrollingDown
107 | );
108 | const expected = false;
109 | expect(actual).toBe(expected);
110 | });
111 |
112 | it('should NOT scroll when there is no scrollbar', () => {
113 | const container: Models.IPositionStats = {
114 | height: 500,
115 | scrolled: 0,
116 | totalToScroll: 0
117 | };
118 | const actual = ScrollResolver.shouldFireScrollEvent(
119 | container,
120 | distance,
121 | scrollingDown
122 | );
123 | const expected = false;
124 | expect(actual).toBe(expected);
125 | });
126 | });
127 |
128 | describe('shouldFireScrollEvent() - UP', () => {
129 | const distance: Models.IScrollerDistance = {
130 | up: 2
131 | };
132 | const scrollingDown = false;
133 | it('should scroll when scrolled upwards', () => {
134 | const container: Models.IPositionStats = {
135 | height: 500,
136 | scrolled: 50,
137 | totalToScroll: 900
138 | };
139 | const actual = ScrollResolver.shouldFireScrollEvent(
140 | container,
141 | distance,
142 | scrollingDown
143 | );
144 | const expected = true;
145 | expect(actual).toBe(expected);
146 | });
147 |
148 | it('should NOT scroll when scroll NOT pass up distance point', () => {
149 | const container: Models.IPositionStats = {
150 | height: 500,
151 | scrolled: 200,
152 | totalToScroll: 800
153 | };
154 | const actual = ScrollResolver.shouldFireScrollEvent(
155 | container,
156 | distance,
157 | scrollingDown
158 | );
159 | const expected = false;
160 | expect(actual).toBe(expected);
161 | });
162 |
163 | it('should scroll when at top zero point', () => {
164 | const container: Models.IPositionStats = {
165 | height: 500,
166 | scrolled: 0,
167 | totalToScroll: 800
168 | };
169 | const actual = ScrollResolver.shouldFireScrollEvent(
170 | container,
171 | distance,
172 | scrollingDown
173 | );
174 | const expected = true;
175 | expect(actual).toBe(expected);
176 | });
177 |
178 | it('should NOT scroll when there is no scrollbar', () => {
179 | const container: Models.IPositionStats = {
180 | height: 500,
181 | scrolled: 0,
182 | totalToScroll: 0
183 | };
184 | const actual = ScrollResolver.shouldFireScrollEvent(
185 | container,
186 | distance,
187 | scrollingDown
188 | );
189 | const expected = false;
190 | expect(actual).toBe(expected);
191 | });
192 | });
193 | });
194 |
--------------------------------------------------------------------------------
/projects/ngx-infinite-scroll/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | ## v 21.0.0 (2025/11/25)
2 |
3 | - [UPGRADE] - now using Angular 21
4 |
5 | ## v 20.0.0 (2025/05/29)
6 |
7 | - [UPGRADE] - now using Angular 20
8 |
9 | ## v 19.0.0 (2024/11/20)
10 |
11 | - [UPGRADE] - now using Angular 19
12 |
13 | ## v 18.0.0 (2024/05/30)
14 |
15 | - [UPGRADE] - now using Angular 18
16 |
17 | ## v 17.0.1 (2024/05/30)
18 |
19 | - feat: introducing ngx-is as a standalone component
20 |
21 | ## v 17.0.0 (2023/11/09)
22 |
23 | - [UPGRADE] - now using Angular 17
24 |
25 | ## v 16.0.0 (2023/05/15)
26 |
27 | - [UPGRADE] - now using Angular 16
28 |
29 | ## v 15.0.0 (2022/08/12)
30 |
31 | - [UPGRADE] - now using Angular 15
32 |
33 | ## v 14.0.1 (2022/06/05)
34 |
35 | - perf fix: up/down event handler #409
36 |
37 | ## v 14.0.0 (2022/06/05)
38 |
39 | - upgrade to Angular V14
40 |
41 | ## v 13.0.2 (2022/06/05)
42 |
43 | - [ADD] - add license
44 |
45 | ## v 13.0.1 (2022/06/05)
46 |
47 | - patch
48 |
49 | ## v 13.0.0 (2022/26/03)
50 |
51 | - [UPGRADE] - now using Angular 13
52 | - [DEV] - includes now a demo app for development
53 |
54 | ## v 10.1.0 (2020/12/09)
55 |
56 | - [FIX] - fixes fast scroll issues #385
57 |
58 | ## v 10.0.1 (2020/12/09)
59 |
60 | - [FIX] - throttle behavior refined - fixed issue #198
61 |
62 | ## v 10.0.0 (2020/11/07)
63 |
64 | - [UPGRADE] - now using Angular 10
65 |
66 | ## v 9.1.0 (2020/09/09)
67 |
68 | - [UPGRADE] - upgrading scarf
69 |
70 | ## v 9.0.0 (2020/05/12)
71 |
72 | - [UPGRADE] - now using Angular 9
73 |
74 | ## v 8.0.2 (2020/05/10)
75 |
76 | - [CHORE] - add @scarf
77 |
78 | ## v 8.0.1 (2019/10/15)
79 |
80 | - [FIX] - solves issue with open collective postinstall #321
81 |
82 | ## v 8.0.0 (2019/07/26)
83 |
84 | - [UPGRADE] - now using Angular 8
85 | - [BREAKING_CHANGE] - `InfiniteScrollEvent` is renamed to `IInfiniteScrollEvent`
86 |
87 | ## v 7.2.0 (2019/06/10)
88 |
89 | - [FIX] - fixes #322 - fixing scrollDistance calculations to include it reach to definite bottom
90 |
91 | ## v 7.1.0 (2019/03/10)
92 |
93 | - [FIX] - 'alwaysCallback' to trigger only when past distance point
94 | - [UPGRADE] - unit tests with puppeteer
95 | - [UPGRADE] - scorll state is now handled within a class
96 | - [FIX] - using now opencollective-postinstall #296
97 |
98 | ## v 7.0.1 (2019/01/04)
99 |
100 | - [FIX] - build fix adding correct version of Typescript 3
101 |
102 | ## v 7.0.0 (2018/12/30)
103 |
104 | - [UPGRADE] - now using Angular 7
105 |
106 | ## v 6.0.1 (2018/06/15)
107 |
108 | - [FIX] - scroll up calculations issues #282
109 | - [CHORE] - more tests for "shouldFireScrollEvent()"
110 | - [CHORE] - added an "exmaples" instead "example" for development
111 |
112 | ## v 6.0.0 (2018/05/22)
113 |
114 | - [UPGRADE] - upgrade to Angular 6 & rxjs 6
115 | - [CHORE] - demo now with 
312 | Welcome To ngx-infinite-scroll
313 |
314 | 341 | {{ i }} 342 |
343 |
55 |
56 |
57 | ## Installation
58 |
59 | ```
60 | npm install ngx-infinite-scroll --save
61 | ```
62 |
63 | ## Supported API
64 |
65 | ### Properties
66 |
67 | | @Input() | Type | Required | Default | Description |
68 | | ------------------------ | -------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
69 | | infiniteScrollDistance | number | optional | 2 | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 \* 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |
70 | | infiniteScrollUpDistance | number | optional | 1.5 | should get a number |
71 | | infiniteScrollThrottle | number | optional | 150 | should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user _stops_ scrolling. |
72 | | scrollWindow | boolean | optional | true | listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll. |
73 | | immediateCheck | boolean | optional | false | invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled) |
74 | | infiniteScrollDisabled | boolean | optional | false | doesn't invoke the handler if set to true |
75 | | horizontal | boolean | optional | false | sets the scroll to listen for horizontal events |
76 | | alwaysCallback | boolean | optional | false | instructs the scroller to always trigger events |
77 | | infiniteScrollContainer | string / HTMLElement | optional | null | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty. |
78 | | fromRoot | boolean | optional | false | if **infiniteScrollContainer** is set, this instructs the scroller to query the container selector from the root of the **document** object. |
79 |
80 | ### Events
81 |
82 | | @Output() | Type | Event Type | Required | Description |
83 | | ---------- | ------------ | -------------------- | -------- | ------------------------------------------------------------------------------- |
84 | | scrolled | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll down. |
85 | | scrolledUp | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll up. |
86 |
87 | ## Behavior
88 |
89 | By default, the directive listens to the **window scroll** event and invoked the callback.
90 | **To trigger the callback when the actual element is scrolled**, these settings should be configured:
91 |
92 | - [scrollWindow]="false"
93 | - set an explict css "height" value to the element
94 |
95 | ## DEMO
96 |
97 | [Try the Demo in StackBlitz](https://stackblitz.com/edit/ngx-infinite-scroll)
98 |
99 | ## Usage
100 |
101 | In this example, the **onScroll** callback will be invoked when the window is scrolled down:
102 |
103 | ```typescript
104 | import { Component } from '@angular/core';
105 | import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
106 |
107 | @Component({
108 | selector: 'app',
109 | template: `
110 |
117 | `,
118 | imports: [InfiniteScrollDirective]
119 | })
120 | export class AppComponent {
121 | onScroll() {
122 | console.log('scrolled!!');
123 | }
124 | }
125 | ```
126 |
127 | in this example, whenever the "search-results" is scrolled, the callback will be invoked:
128 |
129 | ```typescript
130 | import { Component } from '@angular/core';
131 | import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
132 |
133 | @Component({
134 | selector: 'app',
135 | styles: [
136 | `
137 | .search-results {
138 | height: 20rem;
139 | overflow: scroll;
140 | }
141 | `,
142 | ],
143 | template: `
144 |
152 | `,
153 | imports: [InfiniteScrollDirective]
154 | })
155 | export class AppComponent {
156 | onScroll() {
157 | console.log('scrolled!!');
158 | }
159 | }
160 | ```
161 |
162 | In this example, the **onScrollDown** callback will be invoked when the window is scrolled down and the **onScrollUp** callback will be invoked when the window is scrolled up:
163 |
164 | ```typescript
165 | import { Component } from '@angular/core';
166 | import { InfiniteScroll } from 'ngx-infinite-scroll';
167 |
168 | @Component({
169 | selector: 'app',
170 | directives: [InfiniteScroll],
171 | template: `
172 |
181 | `,
182 | })
183 | export class AppComponent {
184 | onScrollDown() {
185 | console.log('scrolled down!!');
186 | }
187 |
188 | onScrollUp() {
189 | console.log('scrolled up!!');
190 | }
191 | }
192 | ```
193 |
194 | In this example, the **infiniteScrollContainer** attribute is used to point directive to the scrollable container using a css selector. **fromRoot** is used to determine whether the scroll container has to be searched within the whole document (`[fromRoot]="true"`) or just inside the **infiniteScroll** directive (`[fromRoot]="false"`, default option).
195 |
196 | ```typescript
197 | import { Component } from '@angular/core';
198 | import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
199 |
200 | @Component({
201 | selector: 'app',
202 | styles: [
203 | `
204 | .main-panel {
205 | height: 100px;
206 | overflow-y: scroll;
207 | }
208 | `,
209 | ],
210 | template: `
211 |
247 |
248 | ## Backers
249 |
250 | Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
251 |
252 |
253 |
254 | ## Sponsors
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
--------------------------------------------------------------------------------
/projects/ngx-infinite-scroll/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.org/orizens/ngx-infinite-scroll) [](#backers) [](#sponsors)
2 | [](https://badge.fury.io/js/ngx-infinite-scroll)
3 | [](https://badge.fury.io/js/ngx-infinite-scroll)
4 | [](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)
5 | [](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)
6 |
7 | ## [Consider Becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor)
8 |
9 | # Angular Infinite Scroll
10 |
11 | versions now follow Angular's version to easily reflect compatibility.
12 | Meaning, for **Angular 10**, use `ngx-infinite-scroll @ ^10.0.0`
13 |
14 | ## Angular - Older Versions Support
15 |
16 | Starting **Angular 6 and Above** - `ngx-infinite-scroll@THE_VERSION.0.0`
17 | For **Angular 4** and **Angular = ^5.5.6** - use version `ngx-infinite-scroll@0.8.4`
18 | For **Angular 5.x** with **rxjs =<5.5.2** - use version `ngx-infinite-scroll@0.8.3`
19 | For Angular version **<= 2.3.1**, you can use `npm i angular2-infinite-scroll` (latest version is 0.3.42) - please notice **the angular2-infinite-scroll** package is deprecated
20 |
21 | ## Used By
22 |
23 | - [Google](https://google.com)
24 | - [Apple](https://apple.com)
25 | - [Amazon](https://amazon.com)
26 | - [Microsoft](https://microsoft.com)
27 | - [Disney](https://disney.com)
28 | - [Sap](https://sap.com/)
29 | - [Cisco](https://cisco.com/)
30 | - [Yandex](https://yandex.com)
31 | - [Ancestry](https://www.ancestry.com/)
32 |
33 | and much more.
34 |
35 | > _These analytics are made available via the awesome [Scarf](https://www.npmjs.com/package/@scarf/scarf) package analytics library_
36 |
37 | ### Opt-Out Of Scarf
38 |
39 | Scarf can be disabled by following [these directions](https://github.com/orizens/ngx-infinite-scroll/issues/352#issuecomment-742009046)
40 |
41 | ## Front End Consulting Services
42 |
43 | I'm a Senior Front End Engineer & Consultant at [Orizens](https://orizens.com).
44 | My services include:
45 |
46 | - Angular/React/Javascript Consulting
47 | - Front End Architecture Consulting
48 | - Project Code Review
49 | - Project Development
50 |
51 | [Contact Here](http://orizens.com/contact)
52 |
53 |
54 |
55 |
56 |
57 | ## Installation
58 |
59 | ```
60 | npm install ngx-infinite-scroll --save
61 | ```
62 |
63 | ## Supported API
64 |
65 | ### Properties
66 |
67 | | @Input() | Type | Required | Default | Description |
68 | | ------------------------ | -------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
69 | | infiniteScrollDistance | number | optional | 2 | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 \* 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |
70 | | infiniteScrollUpDistance | number | optional | 1.5 | should get a number |
71 | | infiniteScrollThrottle | number | optional | 150 | should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user _stops_ scrolling. |
72 | | scrollWindow | boolean | optional | true | listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll. |
73 | | immediateCheck | boolean | optional | false | invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled) |
74 | | infiniteScrollDisabled | boolean | optional | false | doesn't invoke the handler if set to true |
75 | | horizontal | boolean | optional | false | sets the scroll to listen for horizontal events |
76 | | alwaysCallback | boolean | optional | false | instructs the scroller to always trigger events |
77 | | infiniteScrollContainer | string / HTMLElement | optional | null | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty. |
78 | | fromRoot | boolean | optional | false | if **infiniteScrollContainer** is set, this instructs the scroller to query the container selector from the root of the **document** object. |
79 |
80 | ### Events
81 |
82 | | @Output() | Type | Event Type | Required | Description |
83 | | ---------- | ------------ | -------------------- | -------- | ------------------------------------------------------------------------------- |
84 | | scrolled | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll down. |
85 | | scrolledUp | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll up. |
86 |
87 | ## Behavior
88 |
89 | By default, the directive listens to the **window scroll** event and invoked the callback.
90 | **To trigger the callback when the actual element is scrolled**, these settings should be configured:
91 |
92 | - [scrollWindow]="false"
93 | - set an explict css "height" value to the element
94 |
95 | ## DEMO
96 |
97 | [Try the Demo in StackBlitz](https://stackblitz.com/edit/ngx-infinite-scroll)
98 |
99 | ## Usage
100 |
101 | In this example, the **onScroll** callback will be invoked when the window is scrolled down:
102 |
103 | ```typescript
104 | import { Component } from '@angular/core';
105 | import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
106 |
107 | @Component({
108 | selector: 'app',
109 | template: `
110 |
117 | `,
118 | imports: [InfiniteScrollDirective]
119 | })
120 | export class AppComponent {
121 | onScroll() {
122 | console.log('scrolled!!');
123 | }
124 | }
125 | ```
126 |
127 | in this example, whenever the "search-results" is scrolled, the callback will be invoked:
128 |
129 | ```typescript
130 | import { Component } from '@angular/core';
131 | import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
132 |
133 | @Component({
134 | selector: 'app',
135 | styles: [
136 | `
137 | .search-results {
138 | height: 20rem;
139 | overflow: scroll;
140 | }
141 | `,
142 | ],
143 | template: `
144 |
152 | `,
153 | imports: [InfiniteScrollDirective]
154 | })
155 | export class AppComponent {
156 | onScroll() {
157 | console.log('scrolled!!');
158 | }
159 | }
160 | ```
161 |
162 | In this example, the **onScrollDown** callback will be invoked when the window is scrolled down and the **onScrollUp** callback will be invoked when the window is scrolled up:
163 |
164 | ```typescript
165 | import { Component } from '@angular/core';
166 | import { InfiniteScroll } from 'ngx-infinite-scroll';
167 |
168 | @Component({
169 | selector: 'app',
170 | directives: [InfiniteScroll],
171 | template: `
172 |
181 | `,
182 | })
183 | export class AppComponent {
184 | onScrollDown() {
185 | console.log('scrolled down!!');
186 | }
187 |
188 | onScrollUp() {
189 | console.log('scrolled up!!');
190 | }
191 | }
192 | ```
193 |
194 | In this example, the **infiniteScrollContainer** attribute is used to point directive to the scrollable container using a css selector. **fromRoot** is used to determine whether the scroll container has to be searched within the whole document (`[fromRoot]="true"`) or just inside the **infiniteScroll** directive (`[fromRoot]="false"`, default option).
195 |
196 | ```typescript
197 | import { Component } from '@angular/core';
198 | import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
199 |
200 | @Component({
201 | selector: 'app',
202 | styles: [
203 | `
204 | .main-panel {
205 | height: 100px;
206 | overflow-y: scroll;
207 | }
208 | `,
209 | ],
210 | template: `
211 |
247 |
248 | ## Backers
249 |
250 | Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
251 |
252 |
253 |
254 | ## Sponsors
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
--------------------------------------------------------------------------------