anasash / ngx-scroll-event Goto Github PK
View Code? Open in Web Editor NEWAn Angular 2+ directive to handle scroll events on an element.
License: MIT License
An Angular 2+ directive to handle scroll events on an element.
License: MIT License
Hello, I've implemented the code as the documentation instructs, even using the div blah blah blah example in the documentation, the isWindowEvent is always true despite being called from an element.
The only difference I see is that I'm using templateUrl
, not the template
as suggested in the documentation. Any ideas?
Thank you for your work!
Hi,
first of all, Thank you for this module!
Situation:
I pull some items from an api and display them as a grid.
When i scroll down, it fetches the next item page from the api and appends it to the rendered data.
Problem:
When scrolling, the "reachingBottom"/"reachingTop" event get's emitted multiple times.
This causes to do the same API call multiple times that causes me to display item pages multiple times.
Example:
+--------------------+
Item 1
Item 2
Item 3
+--------------------+
Item 4
Item 5
Item 1-3 are in my Viewport and item 4/5 are my "buffer"
When scrolling down, the event gets emitted and calls my api:
...get("/page&after=5")
Since the events gets emitted faster than my api responds, the request will be send multiple times and my list looks like this:
Item 1
Item 2
Item 3
+--------------------+
Item 4
Item 5
Item 6
Item 7
+---------------------+
Item 8
Item 6
Item 7
Item 8
Item 6
Item 7
Item 8
Feature Request:
I would like to have an ability to limit the amount of events or "lock" them until unlocked.
Regards
HI Developers,
I'm trying to move my application from Angular 5 to 6, but while upgrading its throwing 5 errors related to peer dependencies.
Pls, let me know how can I fix those issue?
Angular 4
I would like to know if any version is compatible with angular 8, thanks
These import statements provided in readme file is not working for v2.0.2. My angular version is 10.2.x
import { NgxScrollEventModule } from 'ngx-scroll-event';
import { NgxScrollEvent } from 'ngx-scroll-event';
I had to change import statement like this:
import { NgxScrollEventModule } from 'ngx-scroll-event/dist/ngx-scroll-event';
import { NgxScrollEvent } from 'ngx-scroll-event/dist/ngx-scroll-event';
Then I have used it this way:
<div libScrollEvent (onscroll)="handleScroll($event)" [topOffset]="100">
...
</div>
Yet it is not working. Showing these error messages in browser console.
core.js:4442 ERROR TypeError: Cannot read property '11' of null
at Module.ɵɵlistener (core.js:15053)
at Object.NgxScrollEventDirective_HostBindings [as hostBindings] (ngx-scroll-event.js:38)
at invokeHostBindingsInCreationMode (core.js:8209)
at invokeDirectivesHostBindings (core.js:8189)
at createDirectivesInstances (core.js:7540)
at Module.ɵɵelementStart (core.js:14865)
at UserResponseModuleItemComponent_div_0_Template (user-response-module-item.component.html:1)
at executeTemplate (core.js:7511)
at renderView (core.js:7318)
at TemplateRef.createEmbeddedView (core.js:10116)
core.js:4442 ERROR Error: ASSERTION ERROR: Reached the max number of directives [Expected=> 1 != 1 <=Actual]
at throwError (core.js:738)
at assertNotEqual (core.js:694)
at initTNodeFlags (core.js:8313)
at resolveDirectives (core.js:8048)
at elementStartFirstCreatePass (core.js:14803)
at Module.ɵɵelementStart (core.js:14841)
at UserResponseModuleItemComponent_div_0_Template (user-response-module-item.component.html:1)
at executeTemplate (core.js:7511)
at renderView (core.js:7318)
at TemplateRef.createEmbeddedView (core.js:10116)
Hello,
Thank you for the recent & well timed update to this package. I just noted that the previous method of importing this library:
import { ScrollEventModule } from 'ngx-scroll-event';
no longer works and so went into the library metadata to find the exported equivalent is apparently now "NgxScrollEventModule".
The readMe still features the old name.
Thank you
Hi,
i am getting an error while doing ng update
for angular9 app.
Error
Package "ngx-scroll-event" has an incompatible peer dependency to "@angular/compiler" (requires "^2.4.5" (extended), would install "10.0.8").
I have angular7 cli project and when trying to build with universal getting the following Error on console
Event is not defined
ReferenceError: Event is not defined
at D:\app2019\dev\customerapp\app\node_modules\ngx-scroll-event\src\scroll.directive.js:59:42
at Object. (D:\app2019\dev\customerapp\app\node_modules\ngx-scroll-event\src\scroll.directive.js:75:2)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (D:\app2019\dev\customerapp\app\node_modules\ngx-scroll-event\src\scroll.module.js:11:26)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
and i am using "ngx-scroll-event": "^1.0.8" version in package.json file.
any help to solve above error.
Module '"../../node_modules/ngx-scroll-event/ngx-scroll-event"' has no exported member 'ScrollEventModule'.ts(2305)
is there something else that let the scroll not scrollable
in my application, I have changed in TS, HTML and CSS file. But it is not calling Handle scroll event.
I am using 1.8 version of ngx-scroll.
Any different configuration also needed? My application code is in angular 5.
and also bottom offset and top offset is showing error like:-
for this <div this is not a property.
Currently, this package only supports vertical scrolling.
It need to support horizontal scrolling as well.
Hi
first of all, awesome work!
would love to know the scrolling direction: up or down whe event is fired.
thx
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.