facing issue while using infinite scroll distance

[sharmilemurugaraj]

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

<div infinite-scroll="" [ERROR ->][infinitescrolldistance]="2" (scrolled)="onScroll()" class="search-results">"

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.

[sharmilemurugaraj]

can you please tell me where I am going wrong?

[orizens]

hi @sharmilemurugaraj
attribute should is case sensitive:

[infiniteScrollDistance]="2"

[azrinsani]

This still doesn't work for me.. and for many others as well. [infiniteScrollDistance] will throw an error

Can't bind to 'infiniteScrollDistance' since it isn't a known property of 'div'.

[Suwadith]

@azrinsani Did you import the module inside the app.module.ts file?

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

imports:[ InfiniteScrollModule ]

[SimranChawla1995]

I've imported the module in app.module.ts @Suwadith .Still giving above error. Can you help ??