Last page in infinite scroll removes preceding items

[harm-less]

Angular version: 6.1.9

ngx-pagination version: 3.2.1

Description of issue: I tried to make a hybrid pagination so it allows of both normal behaviours and as an infinite scroll from what was proposed in #268. So far so good and I made it work for the most part. However, when I reach the last page (guess it wasn't infinite after all 😉) only those last results are being shown the preceding items are removed from the for loop as my collection is being sliced in the paginate pipe.

Expected result: I expect the items from the last page to be appended to the list of items from the previous pages.

I already concluded from looking at the source code that at the last page the paginate pipe sets the serverSideMode flag to false if the totalItems matches the collection length.

Suggested fix: Add a config flag called isInfiniteScroll (or isAsync or serverSideMode) and replace a line in the paginate pipe:

var serverSideMode = args.totalItems && args.totalItems !== collection.length;

Into

var serverSideMode = args.isInfiniteScroll || (args.totalItems && args.totalItems !== collection.length);

This way you keep it backwards compatible with minimum additions.

Let me know what you think, Harm

[harm-less]

My temporary workaround is setting totalItems in my config to something like this:

totalItems = Math.max(0, totalItems - 0.1)

This way the totalItems and the collection length never matches and the serverSideMode is always true 😄

[DmitriyIvchenko]

Hello, are there some other ideas how to solve this problem?

I have another solution, but it looks not so good.

step 1. create new Array fakeItemsPerPage = new Array(itemsPerPage);

step 2 use it like this in html template

<div
  style="display: none"
  *ngFor="let item of fakeItemsPerPage | paginate: { itemsPerPage: itemsPerPage, currentPage: page, totalItems: totalItems }">
</div>