orizens / ngx-infinite-scroll Goto Github PK
View Code? Open in Web Editor NEWInfinite Scroll Directive for Angular
Home Page: https://www.npmjs.com/package/ngx-infinite-scroll
License: MIT License
Infinite Scroll Directive for Angular
Home Page: https://www.npmjs.com/package/ngx-infinite-scroll
License: MIT License
Take a look if you're interested and LMK
I am trying to embed some HTML that I know is trusted (from oembeds) and use them in a loop. They display fine, but whenever I go to scroll (by even a pixel) it reloads all the iframes on the page. You can see this happening in this plunker:
Trying to use your infinite scroll and i am not able to get the div to scroll. The screen is filled with content and should be scrolling but it is not. Using [email protected].
Can you post a jsfiddle or something in your readme that shows a simple working example?
Thanks
Html
<div class="listPage" infinite-scroll="onScroll()" infinite-scroll-distance="2">
<preview
class="listPage__preview"
*ngFor="#preview of previews"
[model]=previewModel>
</preview>
</div>
TS
@Page({
directives: [InfiniteScroll],
})
export class DoSomething {
private onScroll: void {
console.log("onScroll");
}
}
Also tried this in my html and it is not scrolling.
<div class="listPage"
infinite-scroll
[infiniteScrollDistance]="2"
(scroll)="onScroll()">
<preview
class="listPage__preview"
*ngFor="#preview of previews"
[model]=previewModel>
</preview>
</div>
Decided to break this down to nothing and just see if it would work with an easy example and i could not get the following to work. It still does not scroll.
<div
infinite-scroll
[infiniteScrollDistance]="2"
(scroll)="onScroll()">
some stuff<br>
asdfjasdk<br>
asdfasdfa<br>
dfasdfasdf<br>
asdfasdfasd<br>
fasdfasdfa<br>
sdfasdfasdf<br>
asdfadfadf<br>
some stuff<br>
asdfjasdk<br>
asdfasdfa<br>
dfasdfasdf<br>
asdfasdfasd<br>
fasdfasdfa<br>
sdfasdfasdf<br>
asdfadfadf<br>
some stuff<br>
asdfjasdk<br>
asdfasdfa<br>
dfasdfasdf<br>
asdfasdfasd<br>
fasdfasdfa<br>
sdfasdfasdf<br>
asdfadfadf<br>
some stuff<br>
asdfjasdk<br>
asdfasdfa<br>
dfasdfasdf<br>
asdfasdfasd<br>
fasdfasdfa<br>
sdfasdfasdf<br>
asdfadfadf<br>
some stuff<br>
asdfjasdk<br>
asdfasdfa<br>
dfasdfasdf<br>
asdfasdfasd<br>
fasdfasdfa<br>
sdfasdfasdf<br>
asdfadfadf<br>
</div>
Hi, could you please look at some bug of scrolling in Internet Explorer (Edge, 10)? It launched fine only 2-3 times and stop infinite scrolling.
I'm trying to load the angular2-infinite-scroll using SystemJS with this config:
SystemJS configuration:
var config = {
map: { 'angular2-infinite-scroll': 'node_modules/angular2-infinite-scroll/bundles' },
packages: { 'angular2-infinite-scroll': { main: 'angular2-infinite-scroll.js', defaultExtension: 'js', format: 'register' } }
};
System.config(config);
And in my component the module is loaded:
import { InfiniteScroll } from 'angular2-infinite-scroll';
However, the imported InfiniteScroll is empty when I execute my app.
What do I missing?
Thanks
I have this code:
<table class="table table-striped table-hover inline-edit"
infinite-scroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="10"
(scrolled)="onScrollDown()">
onScrollDown() {
this.pageNumber += 1;
this.getContacts();
}
When it reaches viewports length it calls onScrollDown multiple times like 5/6 times
the ReadMe doesn't describe what this attribute really is. the default is 2. 2 what?
after stepping through code I now understand that it it's the number of viewport lengths from the bottom of the page at which the (scrolled)
event should be emit, but it would be helpful to have that in the documentation.
I would love to help implementing this but I'm opening the issue as a reminder.
Thanks!
Any hint about this error? It was working in the last version, after update it shows this:
"Error: Can't resolve all parameters for InfiniteScroll: (?).
at new BaseException (http://localhost:9100/node_modules/@angular/compiler/src/facade/exceptions.js:20:23)
at CompileMetadataResolver.getDependenciesMetadata (http://localhost:9100/node_modules/@angular/compiler/src/metadata_resolver.js:295:19)
at CompileMetadataResolver.getTypeMetadata (http://localhost:9100/node_modules/@angular/compiler/src/metadata_resolver.js:174:26)
at CompileMetadataResolver.getDirectiveMetadata (http://localhost:9100/node_modules/@angular/compiler/src/metadata_resolver.js:138:28)
at Array.map (native)
at eval (http://localhost:9100/node_modules/@angular/compiler/src/runtime_compiler.js:84:63)
at Array.forEach (native)
at RuntimeCompiler._compileComponent (http://localhost:9100/node_modules/@angular/compiler/src/runtime_compiler.js:81:36)
at eval (http://localhost:9100/node_modules/@angular/compiler/src/runtime_compiler.js:71:49)
at run (http://localhost:9100/node_modules/core-js/client/shim.js:4016:23)"
when i am apply to implement in inner div scroll its not working
I was looking at your example on http://orizens.github.io/echoes-ng2/ and apparently the infinite scrolling doesn't work in IE11.
https://github.com/orizens/angular2-infinite-scroll/blob/master/src/scroller.ts#L26
window.hasOwnProperty('document')
is false!
Maybe use !!window.document
See this issue: angular/angular#9030
Hi, first thx to adapt infinite-scroll to angular2, my problem is when I scroll down, the onScrollDown() function is called more than one time, I want to call it only once see my code, is something strange?:
export class App implements OnInit{
_contactsTotal:any; // get 500 data from server
_contactsToRepeatInView:any;
_waitData: boolean; //no ajax call if we are already waiting one
constructor(private _contactService: ContactService) {}
ngOnInit():any {
this._contactsToRepeatInView = []
this._waitData = false;
this._contactService.getImages().map(res => res.json()).subscribe(data => {
this._contactsTotal = data;
this._contactsToRepeatInView = this._contactsTotal.splice(0,100); // show only 100 data from server response
});
}
onScrollDown () {
this._contactsToRepeatInView = this._contactsToRepeatInView.concat(this._contactsTotal.splice(0,100)) // when scrollDown concat() 100 additional data to actual view, from this._contactsTotal
if(this._contactsTotal.length === 0){ //when this._contactsTotal equal 0 we do another ajax call and so the same stuff
this._waitData = true; //this is problem
if(this._waitData === true){ //this is problem
this._contactService.getImages().map(res => res.json()).subscribe(data => {
this._waitData == false; //this is problem
this._contactsTotal = data
this._contactsToRepeatInView = this._contactsToRepeatInView.concat(this._contactsTotal.splice(0,100))
});
}
}
}
}
testing for:
I also would like to integrate Travis-ci and github testing for pull requests
I am using Angular 2 RC 4, TypeScript 2.
After updating from angular2-infinite-scroll 0.1.95 to 0.2.0, got the error in my terminal:
ERROR in /my-project/node_modules/angular2-infinite-scroll/src/scroller.d.ts
(1,1): error TS2688: Cannot find type definition file for 'core-js'.
which is this line in the scroller.d.ts file gives error:
/// <reference types="core-js" />
When I load new ellements with scroll up, the scroll is set to top, and then, the new elements are shown and I lose reference of the element I was watching at the moment the new elements loaded.
Would be awesome to have an option to mantain scroll position in order to keep seeing the '0' element when '-1', '-2' are loaded.
status pre load:
0 --> on screen
1
2
status after load:
-2 --> on screen
-1
0
1
2
status after load desired:
-2
-1
0 --> on screen
1
2
Tried to upgrade to 0.1.3 which added a typings folder and it caused a lot of duplicate definitions in my application and then failed to load the infinite-scroll component with a dep not found error.
Please consider including the .ts files with the npm package. When using with webpack I end up with warnings:
WARNING in ./~/angular2-infinite-scroll/angular2-infinite-scroll.js
Cannot find source file 'angular2-infinite-scroll.ts': Error: Cannot resolve 'file' or 'directory' ./angular2-infinite-scroll.ts in /Users/nsmith/project/node_modules/angular2-infinite-scroll
WARNING in ./~/angular2-infinite-scroll/src/infinite-scroll.js
Cannot find source file 'infinite-scroll.ts': Error: Cannot resolve 'file' or 'directory' ./infinite-scroll.ts in /Users/nsmith/project/node_modules/angular2-infinite-scroll/src
WARNING in ./~/angular2-infinite-scroll/src/scroller.js
Cannot find source file 'scroller.ts': Error: Cannot resolve 'file' or 'directory' ./scroller.ts in /Users/nsmith/project/node_modules/angular2-infinite-scroll/src
This module is great! Thanks for working on it. I can't seem to use this with webpack due to the src dependencies on System and lack of the angular2-infinite-scroll.ts file in the project root.
Can someone please explain why
Thanks
Could you please publish the current version on npm?
I am using angular2-infinite-scroll 0.1.2.
I expect
[infiniteScrollDistance]="2"
(scrolled)="onScrollDown()"
makes onScrollDown()
runs only when scroll down near the bottom.
However, it runs no matter I scroll up or down, also no matter it is near the bottom or not.
Check the my plunker.
Am I using it wrong? Thanks
RC-5 is out, so can you please update this to rc-5, it will be great that way..
I believe this only works at alpha.7 now
Since the 1.2.0 release is built with typescript 2.0.0 the file scroller.d.ts
containes the reference to @types
typings which don't work with the current stable release of typescript (1.8.x) and throw a compiler error.
Hi,
This directive has an issue that when we move away from the component using this directive, the binding doesn't destroy. And if you scroll window on next page, the scrolled function of the previous page is still being called.
I fixed it locally bt replacing these lines in the scroller contructor:
//this.isContainerWindow = toString.call(this.windowElement).includes('Window');
this.isContainerWindow = Object.prototype.toString.call(this.windowElement).includes('Window');
When we scroll (go) to the last page, we want to the destroy infinite scroll directive so that it cant make any wasted requests repeatedly.
I saw you already attached it with ngOnDestroy life circle hook, but i dont know how to call this event.
Thank you.
Take live example , implement DoCheck for App component. Write something to console from it.
Open console. You will see that change detection cycle runs continually.
Leave browser for some time. It will crash.
in order to have a sane bdd dev workflow, the tests/tsconfig.json should be the main json, and rather the current "tsconfig.json" should be used only when releasing a new npm version.
To do that, those should be replaced with each other.
I think the repo-team have to implement an example of millions rows object (virtual scroll) to simlpify us the utilisation because I don't know how implement something like :http://www.ok-soft-gmbh.com/jqGrid/99999VirtualScroll.htm it add data when scroll on bottom and delete on top, it seems it's very very speed, someone have an idea to realize this stuff ? thanks
I am getting this error when I include it as in the example.
Template parse errors:
Can't bind to 'infiniteScrollUpDistance' since it isn't a known native property
The (scrolledUp) event is not triggering either with or without including the infiniteScrollUpDistance attribute.
I can get the default (scolled) event to work as expected, just not the scroll up.
Tried to import and use aot compiler to compile.
Error: Unexpected value 'InfiniteScrollModule' imported by the module
info copied from valor-software/ng2-charts#391
angular/angular#11262 (comment)
angular/angular#11262 (comment)
angular/angular#11262 (comment)
Complete conversation (angular/angular#11262)
Does not seem to respect infiniteScrollDistance setting.
Is infiniteScrollDistance implented?
i have
<div #itemListViewWrapper infinite-scroll [infiniteScrollDistance]="1" (scrolled)="onScroll()">
<item-component *ngFor="#item of itemListView" [item]="item"></item-component>
</div>
onScroll fires basically whenever i scroll regardless of distance bottom of the div to bottom of window
changing it to 0 or 2 doesn't matter
The last else clause reads 'elem.offsetTop;' Do you mean to return that value?
version: 0.1.4
Hello,
I'm interesting to your infinite scroll for Angular 2 but I'm unable to install it..
In my angular-cli-build.js, I write:
'angular2-infinite-scroll/bundles/angular2-infinite-scroll'
In system-config.ts, I write:
in map section: 'angular2-infinite-scroll'
: 'vendor/angular2-infinite-scroll/bundles/angular2-infninte-scroll.js'
And finally in package section:
`angular2-infinite-scroll': {
format: global
}``
If you scroll using the ctrl+end shortcut, or drag the scroll bar to the bottom of the page in one go the ScrollDown event doesn't fire. This seems to be due to the change in #58. Throttle fires the initial event to your handler function, which decides not to fire ScrollDown because of the scroll position, and then no further scroll events are raised so the handler does not run again.
Could possibly solve this by adding configuration to decide to use throttle or debounce?
CC @scooper91
I got this error after updating from 0.1.2
to 0.1.3
.
EXCEPTION: TypeError: Cannot read property 'query' of null
The code is quite simple:
import { Component } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { InfiniteScroll } from 'angular2-infinite-scroll';
@Component({
selector: 'app',
directives: [InfiniteScroll],
styles: [`
.search-results {
height: 20rem;
overflow: scroll;
}
`],
template: `
Hello InfiniteScroll!
<div class="search-results"
infinite-scroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="500"
(scrolled)="onScroll()">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
`
})
class App {
onScroll () {
console.log('scrolled!!')
}
}
bootstrap(App);
It happens after I adding this part (Without this part, no error):
<div class="search-results"
infinite-scroll
[infiniteScrollDistance]="2"
[infiniteScrollThrottle]="500"
(scrolled)="onScroll()">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
Hi,
I'm having a problem perform rollup on this package. I know this may be a problem with the rollup-plugin-commonjs . I have already filed a issue at rollup/rollup-plugin-commonjs#87
However, my question is how do I package this into ES2015 module instead of a commonjs module? I tried to change the tsconfig.json but did not figure out how to properly build it. Or I did not figure out how to properly install from my own github repo here https://github.com/sunshineo/angular2-infinite-scroll
I ended up doing some crazy manual changes that you can see at https://github.com/sunshineo/angular2-infinite-scroll/commits/master
Please help. Thank you very much!
Hi I am using angular 2 infinite scroll module, I am using the same code that has been given in the module page still I am facing issue as
"EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'infinitescrolldistance' since it isn't a known native property (" grey-color">
I have included the module in component.ts like "import { InfiniteScroll } from 'angular2-infinite-scroll';" and also in directive path. Below is my code in jade format:
div(layout= "row")
div.md-whiteframe-6dp.white-color(flex="20",style="min-height:500px")
sd-sidenav
div.md-whiteframe-5dp.grey-color(flex="35" layout="column")
div(flex="90")
md-subheader.grey-color
.search-results(infinite-scroll='', [infinitescrolldistance]='2', (scrolled)='onScroll()')
md-list.carestream-listing.md-whiteframe-z2.md-margin.white-color(_ngFor ="#carecircle of carecircleMemberList; #index = index", (click)="showCareCircle(carecircle._id)" , [ngClass]="{pullright : activeItem === carecircle._id}")
div
md-list-item.md-2-line
img.md-avatar(style="border-radius:50%",src='./client/app/assets/images/defaultprofile.jpg', alt='Image')
.md-list-item-text(layout='row')
div(flex='80')
h3 {{carecircle.firstName}} {{carecircle.lastName}}
//p {{carecircle.status}}
div(layout='row',flex='20',layout-align ='end end')
span(_ngIf='showMemberDeleteCheckbox')
md-checkbox.md-primary((click)="storeDeleteMember(carecircle, $event)")
div.md-padding(flex="10" layout="row" layout-align="end end")
button.md-fab.orbita-primary-bg-color.orbita-icon-shadow(md-fab='', (click)="addMember()")
i(class="material-icons") add circle
when I remove infinitescrolldistance property, I am facing "EXCEPTION: TypeError: Cannot read property 'zone' of null".
Can you please help me out to find out the issue that I am facing.
The 0.1.91 package in npm doesn't include the angular2-infinite-scroll.js
and angular2-infinite-scroll.d.ts
files thereby braking imports in existing applications. These files are still included in the git repo (the typescript source).
I created a modal, position fixed, and I'm blocking the scroll of its background content, the html tag, with overflow: hidden.
`
the scroll itself, the function of the browser, its working properly, but the onScroll() function is never called :S
-RC4
Thanks!
I started with version 0.1.4. There is a file, angular2-infinite-scroll.js
in this distribution which I point systemJS to during config. When I updated to latest version of infinite-scrolling module, this file disappeared (replaced by .ts file), and caused the typescript compilation step of my build to fail. I couldn't get systemJS to load from the new .ts file easily so I reverted to the old version.
I am writing chrome extension, so i'm trying to keep footprint as small as possible. Currently need to include multiple js files, can we get a single umd to include instead of the multiple for this directive?
I am facing a very strange issue, my HTML code looks like this
<li class="list-group-item"
*ngFor="let promoter of Promoters | async"
infinite-scroll
[infiniteScrollDistance]="10"
[infiniteScrollThrottle]="500"
(scrolled)="onScrollDown()">
</li>
In this case my onScrollDown() funtion is getting called even when I scroll up.
Sometimes might want the infinite scroll to load a certain way on scroll up vs. scroll down.
Please remove /// <reference path="../typings/index.d.ts" />
and add this file in the tsconfig.json file.
files: ["../typings/index.d.ts"]
Thanks!
Hi, I'm trying to use it on ngModule, and in your documentation you import it as:
import { InfiniteScrollModule } from 'angular2-infinite-scroll';
But in 0.2.1 cannot resolve.
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.