Ngx-infinite-scroll: How to use infinite scroll with Angular2 Material

[marviobezerra]

I'm trying to use the infinite scroll inside a "md-sidenav-layout" but it doesn't work. The div element which has overflow=auto is a dynamic element created in run time.

Any idea?

[orizens]

hi. can you supply a plunkr that demonstrates the issue?

[bukharin]

Sometimes component which handle infinitescroll event doesn't know about the current scroll container.

For instance: modals. Modal libraries ask you to provide component type and renders it dynamically in modal body. In this case scroll container - is an modal window, but component which handle initifnite scroll places in modal-body.

May be we need an api to specify scroll container explicitly?

[mmgyce]

Does it work with Material 2 yet?

[orizens]

it works with md-sidenav (latest available)

[orizens]

here's an example with latest Material:
https://plnkr.co/edit/I5JljrBLFa1BI25TKmvI?p=preview

[mmgyce]

Thanks orizens!

[gotson]

does anyone have an example with angular/material2, a sidenav and a router-outlet ?
Basically i want a component displayed inside the router-outlet to infinite scroll, but the scroll is owned by the sidenav-content

i suppose i need to use the new infiniteScrollContainer introduced in https://github.com/orizens/angular2-infinite-scroll/pull/108, but i can't get it to work :(

[WillAnd31]

Looks like it's not working when using it inside of a component that is being routed to. Here's a plunker with what I mean:

https://plnkr.co/edit/VFzs9w2ySG1nPrO7OLyz?p=preview

[kunshao-msft]

Same issue with @WillAnd31

[zishanj]

I am also facing this issue when placed the content inside md-sidenav-container and set its height: 100%. If I remove this height style from md-sidenav-container then it works well. I have to use this height for side-nav to display in full length.

[zishanj]

May be a reference to custom scroll container will work. But how to use it? :/

[zishanj]

@orizens any fix to this?

[orizens]

please consult this issue for possible solution

98

[nelsondude]

Still looking for a fix, maybe ditch infinite scroll and use scroll position instead?

[pegaltier]

Try adding:
infiniteScrollContainer=".your-container-class"
[fromRoot]="true"

[flyfj]

not working. can we have a way to fix this?

[sergiobrr]

Dunno why but not working here too - i used the same code as the demo but nothing...

[b4z81]

+1

[andresbm05]

For those having trouble making it work with mat-sidenav and routed component inside here is what worked for me:

First, put a class to sidenav container
<mat-sidenav-content class="my-sidenav-content">

And then add theese options to the infiniteScroll container:
infiniteScrollContainer=".my-sidenav-content" [fromRoot]="true"

[xa-xa-xa]

It did work for my me.

[kev-landry]

@andresbm05 solution worked for me.
Even tho i had to use simple quote like this:
infiniteScrollContainer="'.my-sidenav-content'"

[Arxero]

@andresbm05 thank you, my friend, you saved me 3 hours and more into figuring it out

[IgorKurkov]

@andresbm05 - [infiniteScrollContainer]="'.mat-dialog-container'" [fromRoot]="true" do the trick! thank you 👍