CODEWITHSUNDEEP
angular
bawse
bawse

Reputation: 201

updating total items in pagination

I am using ngx-pagination in my Angular 4 app and an example of what I'm trying to do can be found here: http://michaelbromley.github.io/ngx-pagination/#/server-paging

However, there is one small difference in the functionality that I want. The example shows a server call in which the total number of items in the response is returned: 

function serverCall(meals: string[], page: number): Observable<IServerResponse> {
const perPage = 10;
const start = (page - 1) * perPage;
const end = start + perPage;

return Observable
    .of({
        items: meals.slice(start, end),
        total: 100
    }).delay(1000);

}

This total is then used to determine how many pages to show in the pagination component. However, the server call I am making only returns an estimate of the number of items that the result could have (as I am querying the server page-by-page). The "estimate" gets more and more accurate with each change in page, so ideally I would like to be able to update the totalItems property asynchronously so that the number of pages is adjusted accordingly.

I have tried something like this:

<ul class="meal-list">
    <li *ngFor="let meal of asyncMeals | async | paginate: this.config">
        {{ meal }}
    </li>
</ul>

<div class="has-text-centered">
    <div class="spinner" [ngClass]="{ 'hidden': !loading }"></div>
    <pagination-controls (pageChange)="getPage($event)" id="server"></pagination-controls>
</div>

where this.config points to a config object in the typescript class. I am updating the totalItems value in this config as soon as a more accurate estimate is being generated, however, the pagination component keeps using the original estimate. I tried to add an async flag to the config object, but this results in an error.

Any help is appreciated.

Upvotes: 0

Views: 2459

Answers (1)

LLai
LLai

Reputation: 13406

Your config passed into the paginate pipe should not have this. your properties in your html only come from your component's class so config in your html is equivalent to this.config in your typescript. Try changing to

<li *ngFor="let meal of asyncMeals | async | paginate: config">
    {{ meal }}
</li>

I was able to create a plnkr of what I think you are going for. (http://plnkr.co/edit/GjeAP0XpbSoRU2bI7GxE?p=preview)

Upvotes: 2

Related Questions