ARTICLEViews: 2848Share  Posted by - Anonymous

Ngbootstrap pagination example code with angular


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>


In this part of tutorial, I'll show you haw to make Table Pagination. We will use NgBootsrap pagination . Code source: Angular: ...

Angular 13 Pagination | Angular 13 Tutorial | Angular 12 Pagination

Angular 9 Pagination Example Using ngx-pagination Module and Bootstrap

Angular 14 Pagination Example Using ngx-pagination

Pagination in Angular | Server Side Pagination | ng Bootstrap | Laravel Angular Tutorial | Part-45



Views -