324 | ngx-infinite-scroll
325 |
326 | items: {{sum}}, now triggering scroll: {{direction}}
327 |
328 |
329 |
330 |
331 |
332 | 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 |