All Languages >> Html >> How to implement Bootstrap 4 for Angular 2 ngb-pagination

“How to implement Bootstrap 4 for Angular 2 ngb-pagination” Code Answer

How to implement Bootstrap 4 for Angular 2 ngb-pagination

typescript by omostan on May 26 2020 Donate

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;
}

}

Source: stackoverflow.com

How to implement Bootstrap 4 for Angular 2 ngb-pagination

html by omostan on May 26 2020 Donate

<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>

Source: stackoverflow.com

Html queries related to “How to implement Bootstrap 4 for Angular 2 ngb-pagination”

Learn how Grepper helps you improve as a Developer!

INSTALL GREPPER FOR CHROME

“How to implement Bootstrap 4 for Angular 2 ngb-pagination” Code Answer

Html queries related to “How to implement Bootstrap 4 for Angular 2 ngb-pagination”

Learn how Grepper helps you improve as a Developer!

All Html Answers

Grepper

Documentation

Social

Legal

Contact