how to user @ng-bootstrap paging code example
Example 1: How to implement Bootstrap 4 for Angular 2 ngb-pagination
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;
}
}
Example 2: How to implement Bootstrap 4 for Angular 2 ngb-pagination
<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>