Does not run again if it has already been run

[ArmandoAmmar]

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

Expected Behavior

It turns out that I need the scroll to run more than once, regardless of whether it has already been executed before and nothing has been added.

Actual Behavior

I use the same scroll for 2 infinite lists and so if I change the list, the event does not fire again, when I exceed the required distance.

Steps To Reproduce / Demo (if applicable)

Even using alwaysCallback it should dispatch the event again. To play, simply activate the event once and nothing is added, when scrolling to the beginning and then downwards past the trigger point.

Your Environment

Version used: 6.0.0 Browser Name and version: Chrome 72.0.3626.119 (Optional) Operating System and version (desktop or mobile):

[orizens]

hi @ArmandoAA looks like you need to initialize the scroller when you change the lists. the way to do that is to wrap each list in a component. if a scroll "point" has already been triggered, it wont trigger it again for performance reasons.

[ArmandoAmmar]

Thanks for the explanation, so I could not fully understand what everCallback does, but that's fine. I think it would be interesting to add this feature.

Is it possible to reset infinite-scroll? Well I ended up remembering that I have a list generated by a search that has its items modified and if it does not allow the event to fire again, how should I proceed?

[orizens]

you can make so when a the list changes, a new component is rendered - consider *ngIf or some other method.

[kandonorbert]

Hello, we have a quite similar issue (since updated from 0.5.1 to 7.0.1). We use infinite scroll on a tbody. The table has filtering options. The issue occurs in the following situation:

1. initial data is loaded in the table
2. scroll down until the first event is fired
3. execute a search (the content of the table is changed)
4. remove the filtering criterion (the content is changed back to the original list)
5. Scroll down again

In step 5 the event is not fired anymore. I assume, that's because at this point the event was already fired. However in the meantime the content was changed so we would need that event. As a workaround we call a .setup() when the data is loaded. However I consider this more a hacky than a clean solution.

//...
    // It is needed to fix ngx-infinite-scroll issue to load the next page for the same checkpoint twice
    @ViewChild('scrollBar', {read: InfiniteScrollDirective}) scrollBar: InfiniteScrollDirective;
//...
        if (this.scrollBar) {
              this.scrollBar.setup();
         }

Would be great to have an option to allow the event firing multiple times.

[orizens]

@kandonorbert try using [alwaysCallback]="true"

[kandonorbert]

Thanks for the quick answer. Unfortunately it does not look like a good solution. It behaves quite strange as it loads the next page for every scroll move, not just when the thumb hits the bottom part. So the thumb remains in the top and becomes smaller and smaller. From user experience point of view I think this is not a good solution.

[denkerny]

@kandonorbert +1, i need that too, i rerender the same component(dynamic component) with another data, so i need to fired scroll event again. @orizens can we have some help with this ?

[phutaneVinayak]

Hello, we have a quite similar issue (since updated from 0.5.1 to 7.0.1). We use infinite scroll on a tbody. The table has filtering options. The issue occurs in the following situation:

1. initial data is loaded in the table
2. scroll down until the first event is fired
3. execute a search (the content of the table is changed)
4. remove the filtering criterion (the content is changed back to the original list)
5. Scroll down again

In step 5 the event is not fired anymore. I assume, that's because at this point the event was already fired. However in the meantime the content was changed so we would need that event. As a workaround we call a .setup() when the data is loaded. However I consider this more a hacky than a clean solution.

//...
    // It is needed to fix ngx-infinite-scroll issue to load the next page for the same checkpoint twice
    @ViewChild('scrollBar', {read: InfiniteScrollDirective}) scrollBar: InfiniteScrollDirective;
//...
        if (this.scrollBar) {
              this.scrollBar.setup();
         }

Would be great to have an option to allow the event firing multiple times.

can you provide a full example? I am also stuck in the same issue, your way is much more promising that's why asking for help.

[orizens]

@phutaneVinayak please create a stackblitz for this

[phutaneVinayak]

Sure, give some time.

On Mon, 15 Apr, 2019, 9:10 PM Oren Farhi, [email protected] wrote:

@phutaneVinayak https://github.com/phutaneVinayak please create a stackblitz for this

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/orizens/ngx-infinite-scroll/issues/316#issuecomment-483305309, or mute the thread https://github.com/notifications/unsubscribe-auth/AYnYTacYIejiJF4qTsfdoWsi7CMSIRnuks5vhJ1zgaJpZM4bexc- .

[phutaneVinayak]

@phutaneVinayak please create a stackblitz for this

Update:- Sorry I didn't get time last weekend for stackblitz. but yes i found the problem. it is in my code. I am not updating flag, that's why i was facing the problem. ya all aside, the problem is solved.

but i am facing another issue. while am scrolling sometimes scroll event trigger multiple times calling the same API twice or more times. I am investigating the issue, but i don't think it would be from my code. still, i will check once again if it is not then i will show stackblitz in the coming weekend.

Great work @orizens

[DDeivid]

Hello, we have a quite similar issue (since updated from 0.5.1 to 7.0.1). We use infinite scroll on a tbody. The table has filtering options. The issue occurs in the following situation:

1. initial data is loaded in the table
2. scroll down until the first event is fired
3. execute a search (the content of the table is changed)
4. remove the filtering criterion (the content is changed back to the original list)
5. Scroll down again

In step 5 the event is not fired anymore. I assume, that's because at this point the event was already fired. However in the meantime the content was changed so we would need that event. As a workaround we call a .setup() when the data is loaded. However I consider this more a hacky than a clean solution.

//...
    // It is needed to fix ngx-infinite-scroll issue to load the next page for the same checkpoint twice
    @ViewChild('scrollBar', {read: InfiniteScrollDirective}) scrollBar: InfiniteScrollDirective;
//...
        if (this.scrollBar) {
              this.scrollBar.setup();
         }

Would be great to have an option to allow the event firing multiple times.

Make sure to destroy scrollBar before you setup new instance of infinite scroll, otherwise you end up with multiple instances all triggering to scroll event

this.scrollBar.destroyScroller();
this.scrollBar.setup();

[osamamalik2000]

this.scrollBar.destroyScroller(); this.scrollBar.setup(); are these functions still available cause i am facing the same issue but not able to solve it

the version i am using is "ngx-infinite-scroll": "^13.1.0", "@angular/cdk": "^13.3.9", "@angular/common": "~13.3.11",