How to implement Bootstrap 4 for Angular 2 ngb-pagination
I was searching for answers to this same question and nobody seems to post a clear answer.
Here's my solution:
ngbPagination with ngFor in Angular 7
export class HomeComponent implements OnInit {
currentPage = 1;
itemsPerPage = 5;
pageSize: number;
constructor() { }
public onPageChange(pageNum: number): void {
this.pageSize = this.itemsPerPage*(pageNum - 1);
}
public changePagesize(num: number): void {
this.itemsPerPage = this.pageSize + num;
}
}
<div class="container-fluid">
<div class="col-6 input-group">
<div class="col-5 input-group-addon">
<ngb-pagination [collectionSize]="users.length" #numPages [pageSize]="itemsPerPage" [(page)]="currentPage" (pageChange)="onPageChange(currentPage)"></ngb-pagination>
</div>
<div class="col-1 input-group-addon">
<input class="input-sm text-center" type="number" [min]="10" [max]="users.length" step="1" [(ngModel)]="itemsPerPage" (onClick)="changePagesize(pageSize)">
</div>
</div>
<ul *ngIf="users">
<li *ngFor="let user of users | slice: pageSize | slice: 0:itemsPerPage">
<img [src]="user.avatar" alt="{{ user.avatar }}">
<p>{{ user.id }}. {{ user.first_name }} {{ user.last_name }}</p>
</li>
</ul>
<pre><span class="float-md-left">Page: {{ currentPage }} / {{numPages.pageCount}}</span><span class="float-md-right">Found items: {{ itemsPerPage }} / {{ users.length }}</span></pre>
</div>
This solution also applies to Angular 6. I have not tested it on other versions.
For more information, check the documentation. Unfortunatley... it lacks vital information regarding ngFor iteration.
Another problem I had was how to set the number of pages. I decided to add my complete solution for those having the same problem. I found this answer here. Take note of the identifier #numPages above. Here is a live demo on stackblitz
it's my working solution. API for ngb-pagination: https://ng-bootstrap.github.io/#/components/pagination
...
</table>
<ngb-pagination [collectionSize]="totalItems" [pageSize]="itemsPerPage" [(page)]="page" [maxSize]="7" [rotate]="true" (pageChange)="loadPage($event)"></ngb-pagination>
In your component you need some like that. Don't forget set your variable in constructor:
itemsPerPage: number;
totalItems: any;
page: any;
previousPage: any;
...
loadPage(page: number) {
if (page !== this.previousPage) {
this.previousPage = page;
this.loadData();
}
}
...
loadData() {
this.dataService.query({
page: this.page - 1,
size: this.itemsPerPage,
}).subscribe(
(res: Response) => this.onSuccess(res.json(), res.headers),
(res: Response) => this.onError(res.json())
)
}