dhilt / ngx-ui-scroll Goto Github PK
View Code? Open in Web Editor NEWVirtual/infinite scroll for Angular
Home Page: https://dhilt.github.io/ngx-ui-scroll/
License: MIT License
Virtual/infinite scroll for Angular
Home Page: https://dhilt.github.io/ngx-ui-scroll/
License: MIT License
I tried to use the scroll with a datasource that is the result of a search, but I can not find a way to tell the scroll component that the datasource has changed in content, so it only triggers the get method first time.
I have tried setting my datasource to null and then create a new one after a new search, and also tried to put an *ngIf on the parent div to disable and re-enable it again but still the scroll does not care if my datasource has changed.
Is there a way I can clear the datasource?
Need to implement Adapter.append method to be able to add items to the end of the scroller' buffer on-flight.
After implementing this I got another issue. when I scroll to top data source index is started going negative. I just want it to scroll in positive index. My Data source code is :
datasource: Datasource = {
get: (index, count) => {
if (index < 0) {
return Observable.of([]);
}
return this.feedsService.getLatestFeeds(this.cursor, false, count).flatMap(value => {
console.log(index + ' ' + count);
this.cursor = value.curs;
console.log(value.matches);
return Observable.of(value.matches);
});
},
settings: {
bufferSize: 20
}
}
Здесь можно обсуждать все идеи и моменты, касающиеся продукта до выхода первой версии. Что и как работает, улучшения, возможные направления развития.
I'm optionally only allowing scrolling up and using the newly added setting maxIndex as
maxIndex: this.allowDown ? +Infinity : 0
But the result is that the first get call has a count value of only 1 instead of the bufferSize.
In version 0.0.7 I could achieve this by calling success with an empty array and returning form the get callback for a 'down' call, but this now prevents any data load.
Is there any way to get a number of entities currently being displayed on screen?
We found a potential security vulnerability in one of your dependencies.
A dependency defined in ./package-lock.json has known security vulnerabilities and should be updated.
Need to investigate package-lock.json and find a solution, update exact dependency.
As a common use case involves the limitation of the index in order to call an api I suggest implementing a setting which limits the index from which data gets loaded.
datasource: IDatasource = {
get: (index, count, success) => {
const data = [];
for (let i = index; i <= index + count - 1; i++) {
data.push({ id: i, text: 'item #' + i });
}
success(data);
},
settings: {
minIndex: 0 // would be nice to have ;)
}
}
In this example get
would only be called with index >= 0
which avoids checks like:
get: (index, count, success) => {
const start = Math.max(index, 0); // no negative indexes
const data = [];
for (let i = index; i <= index + count - 1; i++) {
data.push({ id: i, text: 'item #' + i });
}
success(data);
}
Hi @dhilt ,
seems like this is another bug which duplicates results when dataset is smaller then bufferSize and requested index larger then one (>1).
For example:
Rendered rows are duplicated.
Hope this makes sense, if not I'll try to setup demo.
Hey,
I am using this for my feed screen list as suggested by @dhilt, But after integrating I got this error. `ERROR in ./node_modules/ngx-ui-scroll/esm5/ngx-ui-scroll.js
Module not found: Error: Can't resolve 'lodash.throttle' in 'D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\esm5'
resolve 'lodash.throttle' in 'D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\esm5'
Parsed request is a module
using description file: D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\package.json (relative path: ./esm5)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\package.json (relative path: ./esm5)
resolve as module
D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\esm5\node_modules doesn't exist or is not a directory
D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\node_modules doesn't exist or is not a directory
D:\PlownsWeb\src\main\pwa\node_modules\node_modules doesn't exist or is not a directory
D:\PlownsWeb\src\main\node_modules doesn't exist or is not a directory
D:\PlownsWeb\src\node_modules doesn't exist or is not a directory
D:\PlownsWeb\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
looking for modules in D:\PlownsWeb\src\main\pwa\node_modules
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules)
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules/lodash.throttle)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.js doesn't exist
as directory
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle doesn't exist
looking for modules in D:\PlownsWeb\src\main\pwa\node_modules
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules)
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules/lodash.throttle)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.js doesn't exist
as directory
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle doesn't exist
looking for modules in D:\PlownsWeb\src\main\pwa\src
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src)
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src/lodash.throttle)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle.js doesn't exist
as directory
D:\PlownsWeb\src\main\pwa\src\lodash.throttle doesn't exist
looking for modules in D:\PlownsWeb\src\main\pwa\src
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src)
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src/lodash.throttle)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle.js doesn't exist
as directory
D:\PlownsWeb\src\main\pwa\src\lodash.throttle doesn't exist
[D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\esm5\node_modules]
[D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\node_modules]
[D:\PlownsWeb\src\main\pwa\node_modules\node_modules]
[D:\PlownsWeb\src\main\node_modules]
[D:\PlownsWeb\src\node_modules]
[D:\PlownsWeb\node_modules]
[D:\node_modules]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.ts]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.js]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.ts]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.js]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle.ts]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle.js]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle.ts]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle.js]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle]
@ ./node_modules/ngx-ui-scroll/esm5/ngx-ui-scroll.js 784:15-41
@ ./src/app/shared.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in D:/PlownsWeb/src/main/pwa/node_modules/ngx-ui-scroll/src/component/interfaces/direction.d.ts (2,15): In ambient enum decl
arations member initializer must be constant expression.
ERROR in D:/PlownsWeb/src/main/pwa/node_modules/ngx-ui-scroll/src/component/interfaces/direction.d.ts (3,16): In ambient enum decl
arations member initializer must be constant expression.
ERROR in Error: Metadata version mismatch for module D:/PlownsWeb/src/main/pwa/node_modules/ngx-ui-scroll/ngx-ui-scroll.d.ts, foun
d version 4, expected 3, resolving symbol SharedModule in D:/PlownsWeb/src/main/pwa/src/app/shared.module.ts, resolving symbol Sha
redModule in D:/PlownsWeb/src/main/pwa/src/app/shared.module.ts
at syntaxError (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler\bundles\compiler.umd.js:24979:23)
at StaticReflector.simplify (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler\bundles\compiler.umd.js:24991:13)
at StaticReflector.annotations (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler\bundles\compiler.umd.js:24418:41)
at _getNgModuleMetadata (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26
)
at D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:129:27
at Array.reduce ()
at extractLazyRoutesFromStaticModule (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:128:10
)
at Object.listLazyRoutesOfModule (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools
api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (D:\PlownsWeb\src\main\pwa\node_modules@ngtools\webpack\src\plugin.js:241:66)
at _donePromise.Promise.resolve.then.then.then.then.then (D:\PlownsWeb\src\main\pwa\node_modules@ngtools\webpack\src\plugin.j
s:495:24)
at
at process._tickCallback (internal/process/next_tick.js:118:7)
webpack: Failed to compile.
^CTerminate batch job (Y/N)? y
D:\PlownsWeb\src\main\pwa>ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-03-27T04:54:46.836Z
Hash: 070901e42f20166c02d1
Time: 28169ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.67 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 1.3 MB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 295 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 18 MB [initial] [rendered]
ERROR in ./node_modules/ngx-ui-scroll/esm5/ngx-ui-scroll.js
Module not found: Error: Can't resolve 'lodash.throttle' in 'D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\esm5'
resolve 'lodash.throttle' in 'D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\esm5'
Parsed request is a module
using description file: D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\package.json (relative path: ./esm5)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\package.json (relative path: ./esm5)
resolve as module
D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\esm5\node_modules doesn't exist or is not a directory
D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\node_modules doesn't exist or is not a directory
D:\PlownsWeb\src\main\pwa\node_modules\node_modules doesn't exist or is not a directory
D:\PlownsWeb\src\main\node_modules doesn't exist or is not a directory
D:\PlownsWeb\src\node_modules doesn't exist or is not a directory
D:\PlownsWeb\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
looking for modules in D:\PlownsWeb\src\main\pwa\node_modules
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules)
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules/lodash.throttle)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.js doesn't exist
as directory
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle doesn't exist
looking for modules in D:\PlownsWeb\src\main\pwa\node_modules
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules)
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./node_modules/lodash.throttle)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.js doesn't exist
as directory
D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle doesn't exist
looking for modules in D:\PlownsWeb\src\main\pwa\src
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src)
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src/lodash.throttle)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle.js doesn't exist
as directory
D:\PlownsWeb\src\main\pwa\src\lodash.throttle doesn't exist
looking for modules in D:\PlownsWeb\src\main\pwa\src
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src)
using description file: D:\PlownsWeb\src\main\pwa\package.json (relative path: ./src/lodash.throttle)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\PlownsWeb\src\main\pwa\src\lodash.throttle.js doesn't exist
as directory
D:\PlownsWeb\src\main\pwa\src\lodash.throttle doesn't exist
[D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\esm5\node_modules]
[D:\PlownsWeb\src\main\pwa\node_modules\ngx-ui-scroll\node_modules]
[D:\PlownsWeb\src\main\pwa\node_modules\node_modules]
[D:\PlownsWeb\src\main\node_modules]
[D:\PlownsWeb\src\node_modules]
[D:\PlownsWeb\node_modules]
[D:\node_modules]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.ts]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.js]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.ts]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle.js]
[D:\PlownsWeb\src\main\pwa\node_modules\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle.ts]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle.js]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle.ts]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle.js]
[D:\PlownsWeb\src\main\pwa\src\lodash.throttle]
@ ./node_modules/ngx-ui-scroll/esm5/ngx-ui-scroll.js 784:15-41
@ ./src/app/shared.module.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts
ERROR in D:/PlownsWeb/src/main/pwa/node_modules/ngx-ui-scroll/src/component/interfaces/direction.d.ts (2,15): In ambient enum decl
arations member initializer must be constant expression.
ERROR in D:/PlownsWeb/src/main/pwa/node_modules/ngx-ui-scroll/src/component/interfaces/direction.d.ts (3,16): In ambient enum decl
arations member initializer must be constant expression.
ERROR in Error: Metadata version mismatch for module D:/PlownsWeb/src/main/pwa/node_modules/ngx-ui-scroll/ngx-ui-scroll.d.ts, foun
d version 4, expected 3, resolving symbol SharedModule in D:/PlownsWeb/src/main/pwa/src/app/shared.module.ts, resolving symbol Sha
redModule in D:/PlownsWeb/src/main/pwa/src/app/shared.module.ts
at syntaxError (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler\bundles\compiler.umd.js:1729:34)
at simplifyInContext (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler\bundles\compiler.umd.js:24979:23)
at StaticReflector.simplify (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler\bundles\compiler.umd.js:24991:13)
at StaticReflector.annotations (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler\bundles\compiler.umd.js:24418:41)
at _getNgModuleMetadata (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:138:31)
at _extractLazyRoutesFromStaticModule (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:109:26
)
at D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:129:27
at Array.reduce ()
at extractLazyRoutesFromStaticModule (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:128:10
)
at Object.listLazyRoutesOfModule (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools_impl.js:53:22)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (D:\PlownsWeb\src\main\pwa\node_modules@angular\compiler-cli\src\ngtools
api.js:91:39)
at AotPlugin._getLazyRoutesFromNgtools (D:\PlownsWeb\src\main\pwa\node_modules@ngtools\webpack\src\plugin.js:241:66)
at _donePromise.Promise.resolve.then.then.then.then.then (D:\PlownsWeb\src\main\pwa\node_modules@ngtools\webpack\src\plugin.j
s:495:24)
at
at process._tickCallback (internal/process/next_tick.js:118:7)
webpack: Failed to compile.`
I am following the example for the reload index functionality shown here: https://dhilt.github.io/ngx-ui-scroll/#/adapter but I am getting Error Type Error "this.datasource.adapter is undefined". Is there an additional package required to install the adapter?
Need to add usage requirements to the documentation.
1. Module requirements
UiScrollModule
importing2. Host Component class requirements
Datasource
typeDatasource.get
and Datasource.settings
3. Host Component template requirements
*uiScroll
syntax4. CSS Viewport requirements
height
and overflow-y
propertiesoverflow-anchor: none
(per angular-ui/ui-scroll#138 (comment))line-height
property (per #13 (comment))Need to provide different items heights functionality (per #31 (comment)).
Here is the demo that does not work properly in some cases: https://stackblitz.com/edit/angular-tfmcme?file=index.html.
Currently ui-scroll makes scrollbar calculations via getBoundingClientRect
. Need to investigate possible issues and review viewport DOM-specific logic if necessary.
Hi
I would like to know if this supports multiple items per row, for example when flex-box is used? None of the examples show that it could.
Hello,
I have the following pattern for information but I am not getting how the scroll fetches new values. In my system I retrieve information as such:
private nodes: Node[] = []
private nodesSource = new Subject<any>();
nodes$ = this.nodesSource.asObservable()
constructor(private http: HttpClient ){
this.http.get(APIroot + '/all').subscribe((data: QUESTIONS.Widget[]) => {
var temp = []
for(var entry of data){
temp.push(new Node(1, data.id))
}
this.nodes = temp;
this.nodesSource.next(data);
})
}
search(string){
var filter = []
for(var node of this.nodes){
if(StringMatch(node, string)){
filter.push(node)
}
}
this.nodesSource.next(filter);
}
In a component I pass the observable as follows:
nodes: Node[] = [];
public datasource: IDatasource = {
get: (index, count) => this.service.nodes$ // from the space above imported to the component
,
devSettings: {
debug: true
}
}
However when I try using my search function, it will only update on the first update. After that it never updates again. I am not understanding why, I would also like to know how I could use index and count with my observable, I do not know how to index an observable.
Hi @dhilt ,
I'm getting and error at some point when reloading the list:
ERROR TypeError: Cannot read property 'getBoundingClientRect' of undefined
at Routines.getParams (ngx-ui-scroll.js:284)
at Item.getParams (ngx-ui-scroll.js:1542)
at Cache.add (ngx-ui-scroll.js:623)
at eval (ngx-ui-scroll.js:684)
at Array.forEach (<anonymous>)
at Buffer.reset (ngx-ui-scroll.js:683)
at Scroller.reload (ngx-ui-scroll.js:1233)
at Workflow.resolveAdapter (ngx-ui-scroll.js:2098)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:243)
at SafeSubscriber.next (Subscriber.js:190)
This happens when previous list had more items then the new one... it's quite strange cause I cant catch it every time.
Routines.prototype.getParams = /**
* @param {?} element
* @return {?}
*/
function (element) {
return element.getBoundingClientRect();
};
element is undefined for one item, not sure why, and it brakes.
hapijs / hoek Known security vulnerability in 2.16.3
Details here.
Is blocked by angular/angular-cli#10480.
$npm ls hoek
+-- @angular/[email protected]
| `-- [email protected]
| `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected] deduped
| +-- [email protected]
| `-- [email protected]
| `-- [email protected] deduped
`-- @angular/[email protected]
`-- [email protected]
`-- [email protected]
`-- [email protected]
`-- [email protected]
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
`-- [email protected]
`-- [email protected] deduped
Is there a way to support paginated data sets with this directive so that I can virtually scroll through an infinite scrolling list by updating my datasource (think async binding via observable) until the user has loaded all the data?
We do this with some data grids elsewhere by using the count/index to slice the data source being fed to the observable. It's handy because it reduces the datasource to approximately the buffer size yielding great performance. However, if one has to load a huge data set to do this, it becomes ineffective. If we could specific a total records setting that gave this directive a way to calculate scroller handle position and 'waypoints' where an event was dispatched every time the scroller reached x% of the current buffer, we could really leverage this nicely.
The index is correctly incremented by the number defined in bufferSize when scrolling down. However when I scroll up, I get weird indexes and I don't know how to calculate current position.
Please see below the flow. I'm only using some very basic example from your demo pages, just populated with some real data and that's it.
index: 0
Scroll down:
index: 4
Scroll down:
index: 8
Scroll down:
index: 12
Scroll up:
Index: 0 //// why 1???
Scroll down:
index: 11 /// ????
Thanks in advance,
Alex
Like in the AngularJs virtual repeater (getLength()). This way the scroll bar can be initially sized to allow an easy access to any part of the data set.
The view should be customizable. There is an idea to make the Directive work with some external solutions like https://github.com/jkuri/ngx-slimscroll. Need to think about flexible API allowing such an integration.
Need to develop test infrastructure and provide first tests.
Hello,
The library works great for my usecase in Chrome, Firefox, Edge and Opera (haven't tried Safari yet).
But it fails in IE11.
I tried opening your demo page in IE11, and it fails as well. Maybe I'm overlooking something?
Is the intention to support IE11?
Best regards
Christian
I am working on getting horizontal scroll implemented in a project. I have followed the demo page but I am unable to get the example working in my own project. It appears that the display: inline-block does not apply to the child divs inside each element so they simply stack on each other. To verify that CSS is not the issue, I have included the rendered code by copying the outer HTML from the browser inspector, and it creates a horizontal scroll as shown in the demo.
I have created a demo stackblitz demonstrating the above here: https://stackblitz.com/edit/angular-ge7otc
Any ideas are much appreciated.
Thanks!
Coming in from another issue. In my case I like call back style. But observables are fine too. basically need to trigger a function to scroll down once data is loaded. Come to think of this would also be nice and convenient to work with.
<div *uiScroll="let item of datasource" onLoad="onLoadFunc">
<b>{{item.text}}</b>
</div>
The UiScrollDirective needs an own Module.
Thanks for module, it's been exactly what I was looking for. One issues that I'm having:
I'm using v0.0.4-rc.1
Is it possible to know the current index (first visible) ?
This would be useful to be able to do a reload at the same positions (for ex. after deleting an element)
Is there a possibility to antecipete the load of the itens. I mean, before the scroll reach the top or the bottom, the load is called. My problem is, when the load is called it takes 1-2 seconds to bring and rendenize my itens on html
I am looking for any pointers on how to implement this virtual scroll for nested ngfor scenarios where I grouped data and iterating through group.items in inner ngFor. Please let me know
How can i start the scroll on bottom?
I have items with diffrent height (chat app with messages / images / video etc...)
And why on the page init the datasource run the get function twice?
I set buffer size to 20
because the DOM elements are replacing while we scroll...im loading the data from api on every scroll so is it possible to add checkboxes to the table and select multiple rows and show the selected rows??
Hey @dhilt,
I can't seem to figure out how to make it work with window scroll.
I don't see anything on the documentation or on the examples but I know that on the AngularJS version it was supported so probably is it something that will be supported in the near future?
Travis? It should include build and tests running.
Need to implement horizontal scrolling. Proposal:
Settings.horizontal = true/false
Hi,
My api is build using the params page and size , so I can do something like page 1 and size 10 to get elements 11 to 20. I was wondering if I could create a datasource with those params or is it fixed to index and count ?
Think about better usage of things: template, datasource, directive instead of (or over) component.
@dhilt I have weird requirement now. I created new stackblitz. Now I need to implement virtual scrolling for sub groups because there is requirement to implement to display detailed view for each item in the group. And with each group having like items up to 100, rendering entire group is still causing performance issues for me and I am trying to figure out the way to implement virtual scrolling to render only limited no of items from group which are visible in UI. Is there any way we can achieve. Would appreciate any thoughts
Hello,
I have tested the "Entire window scrollable" demo on Chrome 68.0.3440.91 on mobile device Huawei Mate 10 Pro using Android 8.0.0.
https://dhilt.github.io/ngx-ui-scroll/#/window
It doesn't really allow you to scroll through the items. It stops at some points, and you have to go further up, and then swipe very quick to get a few more rows shown. Sometimes it rapidly jumps to the top.
I don't know if the component is supposed to support mobile devices, but i hope so :)
Thanks
Christian
Is there a way to refresh the scroll bars when the items change height as I noticed in my use of the component that when the row items change height after the view is rendering scrolling with the new items now causes empty space at the top of the list.
I have a question: can ngx-ui-scroll be used toghether with a perfect scrollbal (like ngx-perfect-scrollbar), or the concepts are not compatible?
Actually I am more interested to replace the native scroll used in ngx-ui-scroll with a perfect scrollbar look.
I really do not know if I am asking you for a new feature, or I can do this on top of ngx-ui-scroll just with css.
initialization spec
initial load spec
scrolling spec
Hi @dhilt ,
was wondering if there is a workaround on using directive on table instead of div. Something like :
<tbody class="viewport" [style.height.px]="800" *ngIf="datasource">
<tr *uiScroll="let rows of datasource">
<td *ngFor="let column of objectKeys(rows)">{{rows[column]}}</td>
</tr>
</tbody>
Currently it's not working properly as it wraps each record in <div data-sid="XYZ">
This would be really awesome if it could work with tables 😄
Cheers!
Multiple errors during compilation:
ERROR in ./node_modules/ngx-bootstrap/dropdown/bs-dropdown.directive.js
Module not found: Error: Can't resolve 'rxjs/add/operator/filter' in 'D:\dev\ngx-ui-scroll\node_modules\ngx-bootstrap\dropdown'
Is blocked by valor-software/ngx-bootstrap#4299.
Would it be possible to add blank rows of expected quantity (before dispatching the request) instead of increasing the gap in top or bottom part of the list when scrolling?
It's really annoying to see the blank space while waiting for the data to be loaded, if the above was possible, we could show blank rows (with a spinner for example) and once the data are loaded we can then populate the pre-generated rows with the loaded data.
What do you think?
Hello there, I'm just wondering if this plugin fits the bill to create a chat like UI. Like similar to whatsapp etc. I have spent a whole day trying a few other angular based virtual scroll and none of them fit the use case. none of them have variable height *known only during runtime, working properly. some do but the height needs to be determined before hand . And for some the array have to be mutable cannot add to the datasource have to create a new array and re-render which is not good for performance since new messages will come often while the user is chatting. And for chat UI the scroll direction is reversed and it should render from the bottom up. i dont need to worry about remote fetching all the messages will be in an array from localstorage. does this fit the bill?
Will probably experiment with this too in a few days but maybe I can get strategy or approach or maybe saves me sometime if this does not fit the bill.
Thank you!
The external template raises 404 error after the compilation of the package is done:
GET http://localhost:4200/ui-scroll.component.html 404 (Not Found)
Failed to load ui-scroll.component.html
The component uses templateUrl
:
@Component({
selector: 'app-ui-scroll',
templateUrl: './ui-scroll.component.html'
})
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.