angular


Angular 4: Infinite scroll not working


I have tried using ngx-infinite-scroll (https://www.npmjs.com/package/angular2-infinite-scroll) and also some other directives but none seem to work.
package.json
"dependencies": {
"#angular/animations": "^4.0.2",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/compiler-cli": "^4.0.2",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/platform-server": "^4.0.2",
"#angular/router": "^4.0.0",
"absurd": "^0.3.8",
"angular2-masonry": "^0.4.0",
"animate.css": "^3.5.2",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.2.1",
"jquery-slimscroll": "^1.3.8",
"metismenu": "^2.7.0",
"ng2-bs3-modal": "^0.10.4",
"ngx-infinite-scroll": "^0.5.1",
"rxjs": "^5.1.0"
}
user.component.html
<div class="row" infiniteScroll [infiniteScrollDistance]="0"
[infiniteScrollThrottle]="300" (scrolled)="loadMore()">
<div class="col-md-3 col-sm-4" *ngFor="let user of userList">
<span>{{user.name}} ({{user.email}})</span>
</div>
</div>
user.module.ts
The import is done
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
#NgModule({
imports: [
CommonModule,
FormsModule,
InfiniteScrollModule
],
declarations: [UserComponent],
providers: [],
exports: [],
})
export class UserModule { }
user.component.ts
export class UserComponent {
constructor() {}
loadMore() {
console.log('method begins');
}
}
Tried using host listener as well but the scroll event just doesn't seem to occur.
Has it got anything to do with the class i'm using on which the infinite scroll is applied?

Related Links

Async binding angular2
How to import and use exported const?
Can't get ng2-bootstrap modal to show up on top of the bs-modal-backdrop
How does Angular-Cli know which environment to use?
Angular 2 RC 6 Scroll directive is not working
Angular 2 RC4 to RC5 migration
How to add select input box and textarea using angular2-mdl?
Angular 2 define data models for multiple modules
Angular 2 click event callback without triggering change detection
How to load a create a login page
Property 'find' does not exist on type 'FormGroup'. any
Can't bind to 'ngModel' since it isn't a known native property or known directive
Basic file structure misunderstanding
Example of http get using Angular2 final release 2.0.1 in ES5
Loading Angular 2 Component in a DOM element created after rendering
PrimeNG beta 15 Angular 2 DataTable not rendering with styling

Categories

HOME
angular
.htaccess
qt5
momentjs
sitecore8
magento-1.9
monitoring
wolfram-mathematica
uwp-xaml
castle-windsor
ibm-mobilefirst
put
aurelia-router
datagrid
soundcloud
css-modules
playframework-2.5
geometry
bayesian
strongloop
wmi-query
alexa-voice-service
category
redactor
spring-boot-actuator
sirikit
laravel-blade
osx-elcapitan
unimrcp
pywavelets
lwip
master-detail
servicestack.redis
sqlcedatareader
ggiraph
chmod
post-build-event
street-address
webex
event-listeners
automated-deployment
inline
oclazyload
gold-parser
ffi
xc8
cakephp-2.x
family-tree
rufus-scheduler
erpnext
case-class
webrole
sift
autocompleteextender
vqmod
r.js
volume-rendering
vibration
aide-ide
syncsort-dmx-h
git-stash
countdowntimer
giflib
ienumerable
datepart
highcharts-ng
kdiff3
splash-screen
pragma
argo
meter
wordpress-4.5
elasticsearch-marvel
reagent
drilldown
puphpet
wunderlist
agsxmpp
build-system
like
slab
file-attributes
httplib
ember-qunit
textile
control-center
interlacing
yepnope
inter-process-communicat
scite
maskedinput
ios6.1
dynamic-languages
ejbql
css-parsing
blat
application-design
habari
abbreviation
comdlg32

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App