Question about items-per-page

Hi Michael!

Still loving the plugin! Right now our issue is that when changing pages it seems like the items are being loaded in/out of the dom; this seems to be causing some delay/jumping of the content when changing pages (its a list of ul li’s with one 5 li’s, one li being an svg image).

However, once we have gone through all the pagination pages, changing pages runs smooth as butter.

Would you happen to have an idea why this happens and how to fix it? 😃

=======

Angular version: 6.0.3

ngx-pagination version: 3.1.1

Any relevant code: in the app.html:

<!--previous -->
<a class="circle circle-left"  (click)="leftArrowJump() ;!p.isFirstPage() ? p.previous() : p.setCurrent(p.getLastPage())"><i class="material-icons arrow">keyboard_arrow_left</i></a>


<!--airline cards -->
<div class="airline-content grid-x grid-margin-x large-up-5 medium-up-3 small-up-1 align-center" id="stuck-prev">
                        <app-airline-card 
                         *ngFor="let airline of shownAirlines | paginate: { itemsPerPage: 20, currentPage: page }" 
                         [airline]="airline">
                         </app-airline-card>
</div>

<!--next -->
 <a class="circle circle-right" (click)="rightArrowJump() ;!p.isLastPage() ? p.next() : p.setCurrent(1)"><i class="material-icons arrow">keyboard_arrow_right</i></a>

<!--pages (dots)-->
    <pagination-template #p="paginationApi" (pageChange)="page = $event">
        <div class="dots-container">
            <div class="dot-div" *ngFor="let page of p.pages">
                <ol id="page-dots"  (click)="p.setCurrent(page.value)">
                    <li [ngClass]="{'active': p.getCurrent() === page.value}">•</li>
                </ol>
            </div>
        </div>
    </pagination-template>

[michaelbromley]

This is just the way that ngFor works. As I mentioned above, you can alter this by using a trackBy function:

<li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }; trackBy: trackByIndex">{{ item }}</li>

trackByIndex(index: number) {
    return index;
}

See this modified demo - you can compare the DOM elements between pages and you’ll see that the objects are now identical.

[michaelbromley]

Great! Glad that fixed it for you 👍