Ngx-infinite-scroll: Not working with inner container

Created on 23 Feb 2019  路  4Comments  路  Source: orizens/ngx-infinite-scroll

Actual Behavior

ERROR Error: ngx-infinite-scroll {resolveContainerElement()}: selector for
at resolveContainerElement (ngx-infinite-scroll.es5.js:24)
at createScroller (ngx-infinite-scroll.es5.js:430)
at ngx-infinite-scroll.es5.js:564
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:3779)
at InfiniteScrollDirective.push../node_modules/ngx-infinite-scroll/modules/ngx-infinite-scroll.es5.js.InfiniteScrollDirective.setup (ngx-infinite-scroll.es5.js:563)
at InfiniteScrollDirective.push../node_modules/ngx-infinite-scroll/modules/ngx-infinite-scroll.es5.js.InfiniteScrollDirective.ngAfterViewInit (ngx-infinite-scroll.es5.js:536)
at callProviderLifecycles (core.js:9560)
at callElementProvidersLifecycles (core.js:9534)

Environment

  • Angular 6
  • ngx-infinite-scroll 6.0.1

Code Used

<div class="comment-tree justify-content-end"> <div class="row scroll-container" infiniteScroll [scrollWindow]="false" [infiniteScrollContainer]="'.scroll-container'" [infiniteScrollDistance]="InfiniteScrollDistance" [infiniteScrollThrottle]="InfiniteScrollThrottle" (scrolled)="infiniteScrolledDown()"> <app-comment-item class="col-12 comment-item comment-lv{{item.level}}-col" *ngFor="let item of comments" [comment]="item" [upvoted]="getUpvoted(item)" (replyCreated)="commentCreated($event)" (commentDelete)="commentDelete($event)"> </app-comment-item> </div> <plot-load-indicator class="mt-3 mb-3" *ngIf="loading"></plot-load-indicator> </div>

Expected Behavior

Need this working in this case.

needs more INFO

Most helpful comment

I have a similar error
<div class="main_panel_not" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" [infiniteScrollContainer]="'.main_panel_not'" (scrolled)="onScrollNotificaciones()"> <app-detalle-notificacion *ngFor="let notificacion of arrayNotificaciones;" [notificacion]="notificacion" [tipo]="'large'"></app-detalle-notificacion> </div>

When I run the following error appears.
ListarNotificacionesComponent.html:13 ERROR Error: ngx-infinite-scroll {resolveContainerElement()}: selector for
at resolveContainerElement (ngx-infinite-scroll.es5.js:27)
at createScroller (ngx-infinite-scroll.es5.js:502)
at ngx-infinite-scroll.es5.js:638
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:17258)
at InfiniteScrollDirective.push../node_modules/ngx-infinite-scroll/modules/ngx-infinite-scroll.es5.js.InfiniteScrollDirective.setup (ngx-infinite-scroll.es5.js:637)
at InfiniteScrollDirective.push../node_modules/ngx-infinite-scroll/modules/ngx-infinite-scroll.es5.js.InfiniteScrollDirective.ngAfterViewInit (ngx-infinite-scroll.es5.js:606)
at callProviderLifecycles (core.js:22416)
at callElementProvidersLifecycles (core.js:22390)

All 4 comments

please reproduce on stackblitz

@orizens , sorry for replying lately.

It works well at the moment. so i am closing this issue.

I have a similar error
<div class="main_panel_not" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" [infiniteScrollContainer]="'.main_panel_not'" (scrolled)="onScrollNotificaciones()"> <app-detalle-notificacion *ngFor="let notificacion of arrayNotificaciones;" [notificacion]="notificacion" [tipo]="'large'"></app-detalle-notificacion> </div>

When I run the following error appears.
ListarNotificacionesComponent.html:13 ERROR Error: ngx-infinite-scroll {resolveContainerElement()}: selector for
at resolveContainerElement (ngx-infinite-scroll.es5.js:27)
at createScroller (ngx-infinite-scroll.es5.js:502)
at ngx-infinite-scroll.es5.js:638
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:17258)
at InfiniteScrollDirective.push../node_modules/ngx-infinite-scroll/modules/ngx-infinite-scroll.es5.js.InfiniteScrollDirective.setup (ngx-infinite-scroll.es5.js:637)
at InfiniteScrollDirective.push../node_modules/ngx-infinite-scroll/modules/ngx-infinite-scroll.es5.js.InfiniteScrollDirective.ngAfterViewInit (ngx-infinite-scroll.es5.js:606)
at callProviderLifecycles (core.js:22416)
at callElementProvidersLifecycles (core.js:22390)

I have a similar error
<div class="main_panel_not" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" [infiniteScrollContainer]="'.main_panel_not'" (scrolled)="onScrollNotificaciones()"> <app-detalle-notificacion *ngFor="let notificacion of arrayNotificaciones;" [notificacion]="notificacion" [tipo]="'large'"></app-detalle-notificacion> </div>

When I run the following error appears.
ListarNotificacionesComponent.html:13 ERROR Error: ngx-infinite-scroll {resolveContainerElement()}: selector for
at resolveContainerElement (ngx-infinite-scroll.es5.js:27)
at createScroller (ngx-infinite-scroll.es5.js:502)
at ngx-infinite-scroll.es5.js:638
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:17258)
at InfiniteScrollDirective.push../node_modules/ngx-infinite-scroll/modules/ngx-infinite-scroll.es5.js.InfiniteScrollDirective.setup (ngx-infinite-scroll.es5.js:637)
at InfiniteScrollDirective.push../node_modules/ngx-infinite-scroll/modules/ngx-infinite-scroll.es5.js.InfiniteScrollDirective.ngAfterViewInit (ngx-infinite-scroll.es5.js:606)
at callProviderLifecycles (core.js:22416)
at callElementProvidersLifecycles (core.js:22390)

you can use HTMLElement by local variable

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Zhuoqing picture Zhuoqing  路  6Comments

kukiel picture kukiel  路  5Comments

tuckerjt07 picture tuckerjt07  路  6Comments

NiNJAD3vel0per picture NiNJAD3vel0per  路  5Comments

sharmilemurugaraj picture sharmilemurugaraj  路  5Comments