2

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">][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.

When I remove infinitescrolldistance property, I am facing

"EXCEPTION: TypeError: Cannot read property 'zone' of null".

Below is my code in jade format. Can you please help me out to find out the issue that I am facing.

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='', (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)")
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Sharmile Murugaraj
  • 1,044
  • 1
  • 8
  • 10

2 Answers2

1

NOTE: For new users, angular2-infinite-scroll is deprecated now. You should use ngx-infinite-scroll instead.

You need to import and export the module in your module.ts incase you have a child module from where you are registering your components. This is usually in scenarios where we use shared modules or route-specific modules.

Sample shared.module.ts :

import { NgModule } from '@angular/core';
import {InfiniteScrollModule} from 'ngx-infinite-scroll';
import {SampleComponent} from './sample.component.ts';

@NgModule({
  declarations: [
    SampleComponent
  ],
  imports: [
    InfiniteScrollModule
  ],
  providers: [
  ],
  exports: [
    SampleComponent,
    InfiniteScrollModule
  ]
})
export class SharedModule { }

Hope this helps!

Aswin Sanakan
  • 655
  • 8
  • 10
0

If you bind a literal value you don't need [] especially if you get this error message which means there is no infinitescrolldistance property

infinitescrolldistance='2',

or 

[attr.infinitescrolldistance]="'2'"

for explicit attribute binding.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • we have to define that property in html right? then how come it is not taking the infinite scroll distance property – Sharmile Murugaraj Apr 18 '16 at 06:31
  • As mentioned in my comment to your question. I have no idea what infinite scroll component you're using and therefore I can't check what `infinitescrolldistance` is supposed to be or how it is supposed to be used. Angular by default binds to properties not attributes http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html – Günter Zöchbauer Apr 18 '16 at 06:33
  • I am not using any component for this, just in my corresponding ts file I have imported infinite scroll module thats it. – Sharmile Murugaraj Apr 18 '16 at 06:59
  • I don't know of any infinite scroll module, so where did you import it from. – Günter Zöchbauer Apr 18 '16 at 07:00
  • I found it https://github.com/orizens/angular2-infinite-scroll/blob/13edc4fe81c37caa5be1ee1a677109532af1c757/README.md. That's clearly an error in the readme. Have you tried my proposed solution? – Günter Zöchbauer Apr 18 '16 at 07:02
  • I have installed the module in my project as "npm i angular2-infinite-scroll" and then in my ts file I have imported as "import { InfiniteScroll } from 'angular2-infinite-scroll'; " – Sharmile Murugaraj Apr 18 '16 at 07:03
  • I have used, but still facing the same issue. – Sharmile Murugaraj Apr 18 '16 at 09:37
  • I am using ngx-infinite-scroll(https://www.npmjs.com/package/ngx-infinite-scroll). I have imported the infinite scroll module in my shared.module.ts, as mentioned in the readme. But, I am getting this error : Can't bind to 'infiniteScrollDistance' since it isn't a known property of 'div'. ("widget-body row removeMargin">
    ][infiniteScrollDistance]="2" [infiniteScrollThrottle]="500" (scrolled)="onScrollDown()">
     – monica Jan 22 '18 at 06:26
  • @GünterZöchbauer Please check their readme and tell me where i am wrong. Or if u have any other solution to this. – monica Jan 22 '18 at 06:27
  • Yes I have tried that too. If I do that the error disappears, but the scrolled event doesn't get triggered! – monica Jan 22 '18 at 06:36
  • Then there might be another problem. Please create a new question with enough information to be able to reproduce the problem. – Günter Zöchbauer Jan 22 '18 at 06:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/163613/discussion-between-monica-and-gunter-zochbauer). – monica Jan 22 '18 at 06:39