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