dhilt/ngx-ui-scroll

Virtual/infinite scroll for Angular

ngx-ui-scroll's Issues

Feature request minIndex setting

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);
}

Horizontal scroll not scrolling

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!

current index

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)

Test infrastructure

Need to develop test infrastructure and provide first tests.

Negative index issue

Thanks for module, it's been exactly what I was looking for. One issues that I'm having:

• I would like to prevent triggering scroll event when the index goes to negative, basically I dont want to go into loops

I'm using v0.0.4-rc.1

Different items heights

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.

virtual scrolling on sub groups

@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

Security vulnerability in hapijs / hoek 2.16.3, Angular CLI dependency

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

list entities count

Is there any way to get a number of entities currently being displayed on screen?

Can't update Demo App to Angular 6

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.

Multiple items per row

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.

Virtual scroll for grouped items with nested ngFor

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

Clear the datasource. API method to reload the scroller

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?

GH Pages

• build demo-app for gh-pages
• run demo-app on gh-pages
• own README for gh-pages

https://dhilt.github.io/ngx-ui-scroll/

Empty space buildup at the top when row item change height

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.

Tests, basic specs

initialization spec

• initializing (host component, datasource, viewport, buffer elements)
• bad datasource
• settings default (datasource with and without settings; settings overriding)
• bad settings

---

initial load spec

• initial load with no clip (3 cases)
• initial load with clip (3-5 cases)
• infinite mode (based on previous clip-tests but only 1 case)

---

scrolling spec

• single one-direction scroll event (3 cases of 1 scroll event per each direction)
• mass one-direction scroll events (3 cases of 3-5 scroll events per each direction)
• mass bouncing scroll events (3 cases of 3-5 sequences of (fwd + bwd) events)
• mass two-direction scroll events (2) (3 cases of (3-5 fwd + 3-5 bwd) events)

With `maxIndex` setting first get call has count 1

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.

First documentation requirements

Need to add usage requirements to the documentation.

1. Module requirements

• UiScrollModule importing

2. Host Component class requirements

• public property of Datasource type
• an agreement on Datasource.get and Datasource.settings

3. Host Component template requirements

• Viewport wrapper (see "CSS Viewport requirements")
• *uiScroll syntax
• items templating

4. CSS Viewport requirements

• height and overflow-y properties
• overflow-anchor: none (per angular-ui/ui-scroll#138 (comment))
• line-height property (per #13 (comment))

Horizontal scrolling

Need to implement horizontal scrolling. Proposal:

Settings.horizontal = true/false

weird index when scrolling back

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

IE11

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

Deployment

Travis? It should include build and tests running.

Is it possible to use page and size while creating datasource

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 ?

perfect scrollbar look

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.

Virtual scrolling with infinite scrolling/pagination?

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.

Moment vulnerability alert

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.

Custom scrollbar

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.

TypeError: Cannot read property 'getBoundingClientRect' of undefined

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.

can we add checboxes

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??

How can scroll on one direction?

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
    }
  }

Scroll issue on mobile device (Chrome/Android)

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

Better usage

Think about better usage of things: template, datasource, directive instead of (or over) component.

Preload

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

Issue during integration Module not found

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.`

Concept

Здесь можно обсуждать все идеи и моменты, касающиеся продукта до выхода первой версии. Что и как работает, улучшения, возможные направления развития.

Chat app UI use case

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!

this.datasource.adapter is undefined

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?

Adapter.append method

Need to implement Adapter.append method to be able to add items to the end of the scroller' buffer on-flight.

Module

The UiScrollDirective needs an own Module.

Window scroll

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?

Inverted datasource logic

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

isLoading api surface

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>

Duplicated results when dataset is smaller then bufferSize and requested index > 1

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:

• dataset has 5 records
• bufferSize is set to 100
• datasource.adapter.reload(2)

Rendered rows are duplicated.

Hope this makes sense, if not I'll try to setup demo.

Review scrollbar calculations

Currently ui-scroll makes scrollbar calculations via getBoundingClientRect. Need to investigate possible issues and review viewport DOM-specific logic if necessary.

Be able to specify the final size of the data set

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.

*uiScroll on table row

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!

Add blank rows while fetching new items

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?

Question on using observables

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:

• http GET request fetches all the data
• The data is then passed to a subject like so

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.

after updating records in datasoruce , view(html) is not updated ? how to refresh datasource

External template/styles for the lib module

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'
})