How pagination works with ng-bootstrap

              · ·

How it all began

…with the official documentation on

OK, i can put the pagination under my table but how to paginate the result with my Angular component?

Now, the solution i’ve found

On Stack Overflow, i found how to implement the pagination to load my table

import {Component, OnInit} from '@angular/core';
import {WaterService} from '../service/water.service';
import {Water} from '../model/water';

  selector: 'app-water',
  templateUrl: './water.component.html',
  styleUrls: ['./water.component.css']
export class WaterComponent implements OnInit {

  waterList: Water[];

  itemsPerPage: number=10;
  totalItems: any;
  page: any=1;
  previousPage: any;

  constructor(private waterService: WaterService) {}

  ngOnInit() {

  loadPage(page: number) {
    if (page !== this.previousPage) {
      this.previousPage = page;

  loadData() {
    this.waterService.getAllPaginate( - 1,
      response => {
        this.waterList = response.content;
        this.totalItems = response.totalElements;
      e => console.log(e)
<div class="row">
	<div class="col-12">
    	<table class="table table-striped">
          <thead class="thead-dark">
          <th scope="col">Statement date</th>
          <th scope="col">Water statement index (m³)</th>
          <tr *ngFor="let e of waterList">
            <td>{{e.statementDate| date: 'dd/MM/yyyy'}}</td>
            <th class="text-right">
              <a class="btn btn-primary"
                <i class="far fa-edit"></i></a>
              <button class="btn btn-danger" (click)="delete(e)">
                <i class="far fa-trash-alt"></i></button>
        <div class="col-12 justify-content-center mb-5">
          <ngb-pagination [collectionSize]="totalItems"

Tips to center the pagination in the middle of the table

.justify-content-center {
  display: flex !important;
  justify-content: center !important;