Angular2 cant bind element in angular2-infinite-scroll

Question

I am new to angular 2 and what I did is use the angular infinite scroll and load the data when the scroll is scrolled but it prompt some error cannot bind property I illustrated below error :

install angular 2-infinite-scroll

import { NgModule, enableProdMode, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { Routes } from '@angular/router';

import { AppComponent } from './app/app.component';

/* Feature Modules */
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { PlanModule } from './plan.module';
import { InfiniteScrollModule } from 'angular2-infinite-scroll';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';


enableProdMode();
@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        DatepickerModule.forRoot(),
        PlanModule,
        InfiniteScrollModule

    ],
    declarations: [],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);

add html page

 <div id="activityList" *ngIf="structure.jobplan" infinite-scroll
            [infiniteScrollDistance]="2"
            [infiniteScrollThrottle]="300"
         (scrolled)="bindActivitiesOnScroll($event)" >

then i got error :

Uncaught Error: Template parse errors:
Can't bind to 'infiniteScrollDistance' since it isn't a known property of 'div'. ("

    <div id="activityList" *ngIf="structure.jobplan" infinite-scroll
            [ERROR ->][infiniteScrollDistance]="2"
            [infiniteScrollThrottle]="300"
         (scrolled)="bindAct"): ng:///ActivityModule/ActivityListComponent.html@5:12
Can't bind to 'infiniteScrollThrottle' since it isn't a known property of 'div'. ("t" *ngIf="structure.jobplan" infinite-scroll
            [infiniteScrollDistance]="2"
            [ERROR ->][infiniteScrollThrottle]="300"
         (scrolled)="bindActivitiesOnScroll($event)" >

"): ng:///ActivityModule/ActivityListComponent.html@6:12
    at syntaxError (index.ts:26)
    at TemplateParser.parse (index.ts:26)
    at JitCompiler._compileTemplate (index.ts:26)
    at index.ts:26
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (index.ts:26)
    at index.ts:26
    at Object.then (index.ts:26)
    at JitCompiler._compileModuleAndComponents (index.ts:26)
    at JitCompiler.compileModuleAsync (index.ts:26)

i googled but cant find a solution why it does not allowing to bind property, couldn't find where i made mistake please help me

Seem the library was deprecated, you should upgrade to the new version github.com/orizens/ngx-infinite-scroll — trungvose
– trungvose, Commented Dec 20, 2017 at 7:18
@trungk18 , i update angualr2-infinite_scroll to rgx-infinate-scroll but problom not solved still error remain as same — christopher
– christopher, Commented Dec 20, 2017 at 8:28
It is weird because your syntax seems correct. Where is your component located in? Is this still inside AppModule or in a different module? — trungvose
– trungvose, Commented Dec 20, 2017 at 8:35
Thank you so much trungk18, confuse is Module, i imports InfiniteScrollModule dif Module, now its works fine — christopher
– christopher, Commented Dec 20, 2017 at 8:51

Kofi Sammie · Accepted Answer · 2018-01-06 10:58:44Z

1

what i did was to import

import { InfiniteScrollModule } from 'angular2-infinite-scroll';

inside my app.module.ts

answered Jan 6, 2018 at 10:58

Kofi Sammie

3,7071 gold badge19 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 cant bind element in angular2-infinite-scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related