facing issue while using angular 2 infinite scroll module

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

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

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!

Jason
Guest

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.