Angular 11

[FrankBechstein]

Your issue may already be reported! Please search on the issue track before creating one.

Expected Behavior

Infinite-Scroll should work with Angular 11.

Actual Behavior

Possible Solution

Steps To Reproduce / Demo (if applicable)

[ ] Please share a stackblitz or plunkr demo reproducing this issue

Context

Can not update my Apps to Angular 11.

Your Environment

• [ ] Version used:
• [ ] Browser Name and version:
• [ ] (Optional) Operating System and version (desktop or mobile):
• [ ] (Optional) Link to your project:

[AreyXo]

Having the same issue, it just doesn't work with Angular 11.

[orizens]

ngx-infinite-scroll has not been released for Angular 11 yet.

[FrankBechstein]

Any idea when we can expect it?

[GeorgianStan]

Hi @FrankBechstein and @AreyXo I just used it in an Angular v11.1.2 and v11.0.1. In both cases it works as expected. You can share a code or explain your implementation.

Please review your configuration, especially the scrollWindow attribute if necessary or not

I mention that I only use it for basic operation, nothing fancy. The code that works for me is the following:

<main
    infiniteScroll
    [infiniteScrollDistance]="2"
    [scrollWindow]="false"
    (scrolled)="onScrollToBottom()"
  >
......

[vikusku]

@GeorgianStan Does infiniteScrollDistance works correctly in you app? I have problem that scrolled event handler is always triggered on scroll, completely ignoring infiniteScrollDistance value.

[GeorgianStan]

@vikusku yes. I have it set at 2 and works perfect both in the window and a container.

[GeorgianStan]

@vikusku @FrankBechstein verify that you have placed the attributes on the scrolling element.

This could be a reason why it doesn't work.

[AreyXo]

I had placed them in router outlet and was having that issue, any suggestions on how to fix it?. @GeorgianStan

[GeorgianStan]

@AreyXo you need to place them on the same element that has the scroll bar. Where is the scroll event happening, in the window on an HTML element?

[AreyXo]

It works fine on the parent element

[AreyXo]

@AreyXo you need to place them on the same element that has the scroll bar. Where is the scroll event happening, in the window on an HTML element?

The scroll is happening inside a component and that component is routed through router outlet in navbar component. The code works fine if I set it inside navbar but doesn't work inside child components. I have explicitly set the height property inside a div that is scrollable as well. It's driving me nuts.

[GeorgianStan]

@AreyXo can you create a fiddle online with the code? Maybe stackblitz

[AreyXo]

@AreyXo can you create a fiddle online with the code? Maybe stackblitz

Will do tomorrow, it is super late in here and would appreciate if you looked at the code. I will have to implement something like this from scratch if it doesn't work. Which will save me some time.

[GeorgianStan]

@AreyXo when you have time, create it and I'll take a look at it.

The workflow for this infinite scroll is pretty straightforward.

You have a container(HTML element) that has a fixed height(px or percentage) with the overflow css rule set to auto or scroll. Then, on this HTML element, you add exactly the options from the above answer.

[AreyXo]

https://github.com/orizens/ngx-infinite-scroll/issues/98 Follow this link for anyone with the same issue. If you are placing it inside a sidenav content then you need to give the drawer a class and then in the component add this infiniteScrollContainer=".my-sidenav-content" [fromRoot]="true"

[AreyXo]

Thank you @GeorgianStan for offering to help, the problem wasn't with my code but something with sidenav.

[GeorgianStan]

@AreyXo glad to hear you solved it.

[FrankBechstein]

Thank you. It seems to work with Angular 11 with our project too now.

[KessoumML]

Works with Angular 11 but not stable, sometimes it bugs, could you describe the issue with more detail?

[egodefroy]

My issue is that it works fine with (scrolled). (scrolledUp) is not easily fired and when it fires, then (scroled) is no longer called.

[jepperaskdk]

@GeorgianStan your proposal to include [scrollWindow]="false" solved my issue on Angular 13.

[vladradulescu1]

@orizens can you please add obs = obs.pipe(throttleTime(options.throttle, undefined, { leading: true, trailing: true })); to this version ?! ( I have angular 11 and ngx-infinite-scroll@10.0.1 and in the node_modules/ngx-infinite-scroll ( that is apparently v10.0.1, I still see obs = obs.pipe(throttleTime(options.throttle));

[orizens]

all, version 13 has been released. I'm closing this issue as there won't be any further work on older versions unless someone wants to downgrade the current ngx-infinite-scroll@13 to version 10. Anyhow, it's recommended to upgrade to most latest version.