How to implement Bootstrap 4 for Angular 2 ngb-pagination

Question

I have a Angular2 app with a component where I have a table. Table is generated via *ngFor directive. Each row of the table is an object with 9 fields that is being loaded from the backend when the component is initialized. In the app I'm trying to use ng-bootstrap for angular module. ng-boorstrap In particular I'm trying to implement the pagination component.

Could somebody explain how to put the code so it would render e.g. only 10 rows per page pls? Or give me a reference where the implementation is done.

What I have done is:

• to put the NgbModule reference to my module where I'm declaring my component as well as the NgbPaginationConfig module (necessary for using custom pagination)

• put the ngb-pagination code in the view of my component like this

  <table class="table table-striped">
  <thead>
      <tr>
          <th>Tracking #</th>
          <th>Brand</th>
          <th>Geography</th>
          <th>Country</th>
          <th>Contract Name</th>
          <th>Project Name</th>
          <th>Status</th>
          <th>$US BMC</th>
          <th>Release #</th>
          <th id="column-last"></th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let item of viewRows "> 
          <td>{{item.trackingNr}}</td>
          <td>{{item.brand}}</td>
          <td>{{item.geo}}</td>
          <td>{{item.country}}</td>
          <td>{{item.contractName}}</td>
          <td>{{item.projectName}}</td>
          <td>{{item.status}}</td>
          <td>{{item.usBmc}}</td>
          <td>{{item.releaseNr}}</td>
          <td id="column-last">
              <span class="awficon-edit" id="row-icons"></span>
              <span class="awficon-close-2" id="row-icons"></span>
          </td>
      </tr>
  </tbody>
  

Answer 1

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())
      )
  }

Answer 2

Ok. I found an awesome solution in github. Check it out. https://github.com/michaelbromley/ng2-pagination

Answer 3

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