ngx-infinite-scroll {resolveContainerElement()}: selector for

[dougse]

With version 8.0.2, I encounter:

Error: ngx-infinite-scroll {resolveContainerElement()}: selector for
at resolveContainerElement (ngx-ins-utils.ts:18)
at createScroller (scroll-register.ts:16)
at infinite-scroll.directive.ts:66
at ZoneDelegate.invoke (zone.js:386)
at Zone.run (zone.js:143)
at NgZone.runOutsideAngular (core.js:28464)
at InfiniteScrollDirective.setup (infinite-scroll.directive.ts:65)
at InfiniteScrollDirective.ngAfterViewInit (infinite-scroll.directive.ts:44)
at callHook (core.js:2521)
at callHooks (core.js:2492)

Which then results in angular failing to render the page and/or some repositioning issues.

Tips please - Thanks

[meyer20]

I'm having this problem when running the tests.

"jest": "^26.6.3",

My implementation:

<div class="card-columns"
     infiniteScroll
     [infiniteScrollDistance]="1"
     [infiniteScrollThrottle]="50"
     (scrolled)="onScroll()"
     [infiniteScrollContainer]="'.parent-container'"
     [fromRoot]="true"
     [hidden]="isLoading">
</div>

[DavidPrata]

core.js:6210 ERROR Error: ngx-infinite-scroll {resolveContainerElement()}: selector for
at resolveContainerElement (ngx-infinite-scroll.js:30)
at createScroller (ngx-infinite-scroll.js:524)
at ngx-infinite-scroll.js:676
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Zone.run (zone-evergreen.js:123)
at NgZone.runOutsideAngular (core.js:28520)
at InfiniteScrollDirective.setup (ngx-infinite-scroll.js:672)
at InfiniteScrollDirective.ngAfterViewInit (ngx-infinite-scroll.js:643)
at callHook (core.js:2573)
at callHooks (core.js:2542)

I have a main container, i open a side right bar... and inside that right bar i want the scroll. But the issue is... the data is loaded with the main container scroll.

Can anybody help?

[osamamalik2000]

What I found is that it is somehow not able to find [infiniteScrollContainer]="'.parent-container'" so it is throwing this error. I somehow managed to use scroll without this function.

[mahdizarei0614]

You can pass the ElementRef type to infiniteScrollContainer:

<div #containerRef style="height: 100vh; overflow-y: auto;">
  <div infiniteScroll
       [infiniteScrollDistance]="2"
       [infiniteScrollThrottle]="50"
       [infiniteScrollContainer]="containerRef">
  </div>
</div>

• Notice that in the container element height must be fixed and the overflow must be set to auto or scroll.

[nirajdgrooar]

You can pass the ElementRef type to infiniteScrollContainer:

<div #containerRef style="height: 100vh; overflow-y: auto;">
  <div infiniteScroll
       [infiniteScrollDistance]="2"
       [infiniteScrollThrottle]="50"
       [infiniteScrollContainer]="containerRef">
  </div>
</div>

• Notice that in the container element height must be fixed and the overflow must be set to auto or scroll.

This worked for me Thanks a lot