Angular Bootstrap Pagination

Angular Bootstrap pagination is a component used to indicate existance of a series of related content across multiple pages and enables navigation across them.

We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".


<!--Pagination -->
<nav class="my-4">
    <ul class="pagination pagination-circle pg-blue mb-0">

        <!--First-->
        <li class="page-item disabled"><a class="page-link" mdbWavesEffect>First</a></li>

        <!--Arrow left-->
        <li class="page-item disabled">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">«</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect >2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect >3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect >4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect >5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">»</span>
                <span class="sr-only">Next</span>
            </a>
        </li>

        <!--First-->
        <li class="page-item"><a class="page-link">Last</a></li>

    </ul>
</nav>
<!--/Pagination -->

        

Basic examples

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.



<nav>
  <ul class="pagination">
    <li class="page-item" >
      <a class="page-link" mdbWavesEffect aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>1</a></li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>2</a></li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>3</a></li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>4</a></li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>5</a></li>
    <li class="page-item" >
      <a class="page-link" mdbWavesEffect aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.



<nav>
  <ul class="pagination pg-blue">
    <li class="page-item disabled">
      <a class="page-link" href="#" mdbWavesEffect aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item active">
      <a class="page-link" mdbWavesEffect>1 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>2</a></li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>3</a></li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>4</a></li>
    <li class="page-item" ><a class="page-link" mdbWavesEffect>5</a></li>
    <li class="page-item" >
      <a class="page-link" mdbWavesEffect aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

You can optionally swap out active or disabled anchors for <span>, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles.


<nav>
    <ul class="pagination pg-blue">
        <li class="page-item disabled">
            <span class="page-link" aria-label="Previous">
                <span aria-hidden="true">«</span>
                <span class="sr-only">Previous</span>
            </span>
        </li>
        <li class="page-item active">
            <a class="page-link" mdbWavesEffect>1 <span class="sr-only">(current)</span></a>
        </li>
    </ul>
</nav>

Pagination color


<!--Pagination blue-->
<nav>
    <ul class="pagination pg-blue">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination blue-->

<!--Pagination red-->
<nav>
    <ul class="pagination pg-red">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination red-->

<!--Pagination teal-->
<nav>
    <ul class="pagination pg-teal">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination teal-->

<!--Pagination dark-->
<nav>
    <ul class="pagination pg-dark">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination dark-->

<!--Pagination blue grey-->
<nav>
    <ul class="pagination pg-bluegrey">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination grey-->

<!--Pagination amber-->
<nav>
    <ul class="pagination pg-amber">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination amber-->

<!--Pagination purple-->
<nav>
    <ul class="pagination pg-purple">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination purple-->

<!--Pagination dark grey-->
<nav>
    <ul class="pagination pg-darkgrey">
        <!--Arrow left-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active"><a class="page-link" mdbWavesEffect>1</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>4</a></li>
        <li class="page-item"><a class="page-link" mdbWavesEffect>5</a></li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" mdbWavesEffect aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>
<!--/Pagination dark grey-->

Sizing

Fancy larger or smaller pagination? Add .pagination-lg or .pagination-sm for additional sizes.


Large

<nav>
  <ul class="pagination pagination-lg">
    <li class="page-item">
      <a class="page-link" mdbWavesEffect aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
    <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
    <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
    <li class="page-item">
      <a class="page-link" mdbWavesEffect aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>
Small

<nav>
  <ul class="pagination pagination-sm">
    <li class="page-item">
      <a class="page-link" mdbWavesEffect aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" mdbWavesEffect>1</a></li>
    <li class="page-item"><a class="page-link" mdbWavesEffect>2</a></li>
    <li class="page-item"><a class="page-link" mdbWavesEffect>3</a></li>
    <li class="page-item">
      <a class="page-link" mdbWavesEffect aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Usage - basic example

Simple usage example with only 3 pages. This example shows how you can use our pagination in your projects.


<main class="container-fluid">
  <h2 class="h1 h1-responsive text-center my-5">MDB Angular Pagination - basic</h2>
  <!--Pagination -->
  <nav class="my-4">
    <ul class="d-flex justify-content-center pagination pagination-circle pg-blue mb-0">
      <!--First-->
      <li class="page-item" [ngClass]="{'disabled': activePage == 1}">
        <a class="page-link" mdbWavesEffect (click)="firstPage()">First</a>
      </li>
      <!--Numbers-->
      <li #pages *ngFor="let page of pageCount" class="page-item">
        <a class="page-link" mdbWavesEffect>{{page}}</a>
      </li>
      <!--Last-->
      <li class="page-item" [ngClass]="{'disabled': activePage == 3}">
        <a class="page-link" mdbWavesEffect (click)="lastPage()">Last</a>
      </li>
    </ul>
  </nav>
  <!--/Pagination -->
  <div class="row my-5">
    <div class="col-md-6 mx-auto my-5">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th class="col-1">ID</th>
            <th class="col-11">Title</th>

          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let post of allPosts">
            <th *ngIf="post.id >= first && post.id <= last" scope="row">{{post.id}}</th>
            <td *ngIf="post.id >= first && post.id <= last">{{post.title}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</main>
	

import { Component, ViewChildren, QueryList, ElementRef, HostListener, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.scss']
})
export class PaginationComponent implements AfterViewInit {
@ViewChildren('pages') pages: QueryList<ElementRef>;

  allPosts = [ ];

  activePage = 1;
  pageCount: Array<any> = [1, 2, 3];
  first = 1;
  last = 4;

  @HostListener('click', ['$event']) onclick(event: any) {
    if (event.target.parentElement.innerText >= 1 || event.target.parentElement.innerText <= 3) {
      (this.activePage as number) = +event.target.parentElement.innerText;
      this.clearActive();
      this.renderer.addClass(event.target.parentElement, 'active');
    }
    this.first = +this.activePage * 4 - 4 + 1;
    this.last = +this.activePage * 4;
  }

  constructor(private renderer: Renderer2, private el: ElementRef) {
    for (let i = 0; i <= 15; i++) {
      this.allPosts.push({id: i, title: 'Post ' + i});
    }
   }

  ngAfterViewInit() {
    this.clearActive();
    this.renderer.addClass(this.pages.first.nativeElement, 'active');
    this.activePage = 1;
    this.first = +this.activePage * 4 - 4 + 1;
    this.last = +this.activePage * 4;
  }

  clearActive() {
    this.pages.forEach(element => {
      this.renderer.removeClass(element.nativeElement, 'active');
    });
  }

  firstPage() {
    this.clearActive();
    const firstPage = this.pages.first.nativeElement;
    (this.activePage as number) = +firstPage.innerText;
    this.clearActive();
    this.renderer.addClass(firstPage, 'active');

    this.first = +this.activePage * 4 - 4 + 1;
    this.last = +this.activePage * 4;
  }

  lastPage() {
    this.clearActive();
    const lastPage = this.pages.last.nativeElement;
    (this.activePage as number) = +lastPage.innerText;
    this.clearActive();
    this.renderer.addClass(lastPage, 'active');

    this.first = +this.activePage * 4 - 4 + 1;
    this.last = +this.activePage * 4;
  }
}
  

Usage - advanced example

Advanced example with previous / next page and first / last page buttons. You can change number of items per page and visible paginators in variables.


        <div class="card card-cascade narrower mt-5">

            <!--Card image-->
            <div class="view view-cascade gradient-card-header purple-gradient narrower py-4 mx-4 mb-3 d-flex justify-content-center align-items-center">
          
              <h4 class="white-text font-weight-bold text-uppercase mb-0">Table with pagination</h4>
          
            </div>
            <!--/Card image-->
          
            <div class="px-4">
          
              <!--Table-->
              <table class="table table-hover table-responsive-md mb-0">
          
                <!--Table head-->
                <thead>
                  <tr>
                    <th scope="row">Id</th>
                    <th class="th-lg">Title</th>
                  </tr>
                </thead>
                <!--Table head-->
          
                <!--Table body-->
                <tbody>
                  <tr *ngFor="let data of tableData; let i = index">
                    <th px-3 *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex" scope="row">{{data.id}}</th>
                    <td *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex">{{data.title}}</td>
                  </tr>
                </tbody>
                <!--Table body-->
              </table>
          
            </div>
          
            <hr class="my-0">
          
            <!--Bottom Table UI-->
            <div class="d-flex justify-content-center">
          
              <!--Pagination -->
              <nav class="my-4 pt-2">
                <ul class="pagination pagination-circle pg-purple mb-0">
          
                  <!--First-->
                  <li class="page-item clearfix d-none d-md-block" (click)="firstPage()" [ngClass]="{disabled: activePage == 1}">
                    <a class="page-link">First</a>
                  </li>
          
                  <!--Arrow left-->
                  <li class="page-item" (click)="previousPage($event)" [ngClass]="{disabled: activePage == 1}">
                    <a class="page-link" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span class="sr-only">Previous</span>
                    </a>
                  </li>
          
                  <!--Numbers-->
                  <li #pages *ngFor="let page of paginators | slice:firstVisiblePaginator:lastVisiblePaginator; let i = index" class="page-item" [ngClass]="{active: i + firstVisiblePaginator + 1 == activePage}">
                      <a class="page-link waves-light" (click)="changePage($event)" mdbWavesEffect>{{page}}</a>
                  </li>
          
          
          
                  <!--Arrow right-->
                  <li class="page-item" (click)="nextPage($event)" [ngClass]="{disabled: activePage == numberOfPaginators}">
                    <a class="page-link" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                      <span class="sr-only">Next</span>
                    </a>
                  </li>
          
                  <!--First-->
                  <li class="page-item clearfix d-none d-md-block" (click)="lastPage()" [ngClass]="{disabled: activePage == numberOfPaginators}">
                    <a class="page-link">Last</a>
                  </li>
          
                </ul>
              </nav>
              <!--/Pagination -->
          
            </div>
            <!--Bottom Table UI-->
          
          </div>
	

import { Component, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-pagination-advanced',
  templateUrl: './pagination-advanced.component.html',
  styleUrls: ['./pagination-advanced.component.scss'],
})
export class PaginationAdvancedComponent implements OnInit {
  @ViewChildren('pages') pages: QueryList<any>;
  itemsPerPage = 10;
  numberOfVisiblePaginators = 10;
  numberOfPaginators: number;
  paginators: Array<any> = [];
  activePage = 1;
  firstVisibleIndex = 1;
  lastVisibleIndex: number = this.itemsPerPage;
  firstVisiblePaginator = 0;
  lastVisiblePaginator = this.numberOfVisiblePaginators;
  tableData = [];

  constructor(private el: ElementRef) {}

  /* tableData = [
    { id: 1, firstName: 'Mark', lastName: 'Otto', username: '@mdo' },
    { id: 2, firstName: 'John', lastName: 'Doe', username: '@john' },
    { id: 3, firstName: 'Lessie', lastName: 'Moe', username: '@lessie' },
    { id: 4, firstName: 'Otton', lastName: 'Otto', username: '@otton' },
    { id: 5, firstName: 'Krauze', lastName: 'John', username: '@krauze' },
    { id: 6, firstName: 'Lex', lastName: 'Lucky', username: '@lex' },
    { id: 7, firstName: 'Allie', lastName: 'Bill', username: '@allie' },
    { id: 8, firstName: 'Anna', lastName: 'Frost', username: '@anna' },
    { id: 9, firstName: 'Bob', lastName: 'One', username: '@bob' },
    { id: 10, firstName: 'Carl', lastName: 'Johnson', username: '@cj' },
    { id: 11, firstName: 'Mia', lastName: 'Marx', username: '@mia' },
    { id: 12, firstName: 'Cia', lastName: 'Fbi', username: '@cia' },
    { id: 13, firstName: 'John', lastName: 'Doe', username: '@johny' },
    { id: 14, firstName: 'Mark', lastName: 'Otto', username: '@mdo' },
    { id: 15, firstName: 'Lessie', lastName: 'Moe', username: '@lessie'}
  ]; */

  changePage(event: any) {
    if (event.target.text >= 1 && event.target.text <= this.numberOfPaginators) {
      this.activePage = +event.target.text;
      this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
      this.lastVisibleIndex = this.activePage * this.itemsPerPage;
    }
  }

  nextPage(event: any) {
    if (this.pages.last.nativeElement.classList.contains('active')) {
      if ((this.numberOfPaginators - this.numberOfVisiblePaginators) >= this.lastVisiblePaginator) {
        this.firstVisiblePaginator += this.numberOfVisiblePaginators;
      this.lastVisiblePaginator += this.numberOfVisiblePaginators;
      } else {
        this.firstVisiblePaginator += this.numberOfVisiblePaginators;
      this.lastVisiblePaginator = this.numberOfPaginators;
      }
    }

    this.activePage += 1;
    this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
    this.lastVisibleIndex = this.activePage * this.itemsPerPage;
  }

  previousPage(event: any) {
    if (this.pages.first.nativeElement.classList.contains('active')) {
      if ((this.lastVisiblePaginator - this.firstVisiblePaginator) === this.numberOfVisiblePaginators)  {
        this.firstVisiblePaginator -= this.numberOfVisiblePaginators;
        this.lastVisiblePaginator -= this.numberOfVisiblePaginators;
      } else {
        this.firstVisiblePaginator -= this.numberOfVisiblePaginators;
        this.lastVisiblePaginator -= (this.numberOfPaginators % this.numberOfVisiblePaginators);
      }
    }

    this.activePage -= 1;
    this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
    this.lastVisibleIndex = this.activePage * this.itemsPerPage;
  }

  firstPage() {
    this.activePage = 1;
    this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
    this.lastVisibleIndex = this.activePage * this.itemsPerPage;
    this.firstVisiblePaginator = 0;
    this.lastVisiblePaginator = this.numberOfVisiblePaginators;
  }

  lastPage() {
    this.activePage = this.numberOfPaginators;
    this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
    this.lastVisibleIndex = this.activePage * this.itemsPerPage;

    if (this.numberOfPaginators % this.numberOfVisiblePaginators === 0) {
      this.firstVisiblePaginator = this.numberOfPaginators - this.numberOfVisiblePaginators;
      this.lastVisiblePaginator = this.numberOfPaginators;
    } else {
      this.lastVisiblePaginator = this.numberOfPaginators;
      this.firstVisiblePaginator = this.lastVisiblePaginator - (this.numberOfPaginators % this.numberOfVisiblePaginators);
    }
  }

  ngOnInit() {
    for (let i = 1; i <= 100; i++) {
      this.tableData.push({id: i, title: 'Post ' + i});
    }

    if (this.tableData.length % this.itemsPerPage === 0) {
      this.numberOfPaginators = Math.floor(this.tableData.length / this.itemsPerPage);
    } else {
      this.numberOfPaginators = Math.floor(this.tableData.length / this.itemsPerPage + 1);
    }

    for (let i = 1; i <= this.numberOfPaginators; i++) {
      this.paginators.push(i);
    }
  }
}

  

Usage - Advanced with data from API

Advanced example with data coming from foreign API. You can change number of items per page and visible paginators in variables.


        <div class="card card-cascade narrower mt-5">

            <!--Card image-->
            <div class="view view-cascade gradient-card-header purple-gradient narrower py-4 mx-4 mb-3 d-flex justify-content-center align-items-center">
          
              <h4 class="white-text font-weight-bold text-uppercase mb-0">Table with pagination</h4>
          
            </div>
            <!--/Card image-->
          
            <div class="px-4">
          
              <!--Table-->
              <table class="table table-hover table-responsive-md mb-0">
          
                <!--Table head-->
                <thead>
                  <tr>
                    <th scope="row">Id</th>
                    <th class="th-lg">Title</th>
                  </tr>
                </thead>
                <!--Table head-->
          
                <!--Table body-->
                <tbody>
                  <tr *ngFor="let data of tableData; let i = index">
                    <th px-3 *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex" scope="row">{{data.id}}</th>
                    <td *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex">{{data.title}}</td>
                  </tr>
                </tbody>
                <!--Table body-->
              </table>
          
            </div>
          
            <hr class="my-0">
          
            <!--Bottom Table UI-->
            <div class="d-flex justify-content-center">
          
              <!--Pagination -->
              <nav class="my-4 pt-2">
                <ul class="pagination pagination-circle pg-purple mb-0">
          
                  <!--First-->
                  <li class="page-item clearfix d-none d-md-block" (click)="firstPage()" [ngClass]="{disabled: activePage == 1}">
                    <a class="page-link">First</a>
                  </li>
          
                  <!--Arrow left-->
                  <li class="page-item" (click)="previousPage($event)" [ngClass]="{disabled: activePage == 1}">
                    <a class="page-link" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span class="sr-only">Previous</span>
                    </a>
                  </li>
          
                  <!--Numbers-->
                  <li #pages *ngFor="let page of paginators | slice:firstVisiblePaginator:lastVisiblePaginator; let i = index" class="page-item" [ngClass]="{active: i + firstVisiblePaginator + 1 == activePage}">
                      <a class="page-link waves-light" (click)="changePage($event)" mdbWavesEffect>{{page}}</a>
                  </li>
          
          
          
                  <!--Arrow right-->
                  <li class="page-item" (click)="nextPage($event)" [ngClass]="{disabled: activePage == numberOfPaginators}">
                    <a class="page-link" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                      <span class="sr-only">Next</span>
                    </a>
                  </li>
          
                  <!--First-->
                  <li class="page-item clearfix d-none d-md-block" (click)="lastPage()" [ngClass]="{disabled: activePage == numberOfPaginators}">
                    <a class="page-link">Last</a>
                  </li>
          
                </ul>
              </nav>
              <!--/Pagination -->
          
            </div>
            <!--Bottom Table UI-->
          
          </div>
	

        import { Component, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
        import { Http } from '@angular/http';
        import { Observable } from 'rxjs';
        
        @Component({
          selector: 'app-pagination-api',
          templateUrl: './pagination-api.component.html',
          styleUrls: ['./pagination-api.component.scss'],
        })
        export class PaginationApiComponent implements OnInit {
          @ViewChildren('pages') pages: QueryList<any>;
          itemsPerPage = 10;
          numberOfVisiblePaginators = 10;
          numberOfPaginators: number;
          paginators: Array<any> = [];
          activePage = 1;
          firstVisibleIndex = 1;
          lastVisibleIndex: number = this.itemsPerPage;
          firstVisiblePaginator = 0;
          lastVisiblePaginator = this.numberOfVisiblePaginators;
          url = 'https://jsonplaceholder.typicode.com/posts';
          tableData: string[];
        
          constructor(
            private http: Http,
            private el: ElementRef) {}
        
          getData(): Observable<any> {
            return this.http.get(this.url);
          }
        
          changePage(event: any) {
            if (event.target.text >= 1 && event.target.text <= this.numberOfPaginators) {
              this.activePage = +event.target.text;
              this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
              this.lastVisibleIndex = this.activePage * this.itemsPerPage;
            }
          }
        
          nextPage(event: any) {
            if (this.pages.last.nativeElement.classList.contains('active')) {
              if ((this.numberOfPaginators - this.numberOfVisiblePaginators) >= this.lastVisiblePaginator) {
                this.firstVisiblePaginator += this.numberOfVisiblePaginators;
              this.lastVisiblePaginator += this.numberOfVisiblePaginators;
              } else {
                this.firstVisiblePaginator += this.numberOfVisiblePaginators;
              this.lastVisiblePaginator = this.numberOfPaginators;
              }
            }
        
            this.activePage += 1;
            this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
            this.lastVisibleIndex = this.activePage * this.itemsPerPage;
          }
        
          previousPage(event: any) {
            if (this.pages.first.nativeElement.classList.contains('active')) {
              if ((this.lastVisiblePaginator - this.firstVisiblePaginator) === this.numberOfVisiblePaginators)  {
                this.firstVisiblePaginator -= this.numberOfVisiblePaginators;
                this.lastVisiblePaginator -= this.numberOfVisiblePaginators;
              } else {
                this.firstVisiblePaginator -= this.numberOfVisiblePaginators;
                this.lastVisiblePaginator -= (this.numberOfPaginators % this.numberOfVisiblePaginators);
              }
            }
        
            this.activePage -= 1;
            this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
            this.lastVisibleIndex = this.activePage * this.itemsPerPage;
          }
        
          firstPage() {
            this.activePage = 1;
            this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
            this.lastVisibleIndex = this.activePage * this.itemsPerPage;
            this.firstVisiblePaginator = 0;
            this.lastVisiblePaginator = this.numberOfVisiblePaginators;
          }
        
          lastPage() {
            this.activePage = this.numberOfPaginators;
            this.firstVisibleIndex = this.activePage * this.itemsPerPage - this.itemsPerPage + 1;
            this.lastVisibleIndex = this.activePage * this.itemsPerPage;
        
            if (this.numberOfPaginators % this.numberOfVisiblePaginators === 0) {
              this.firstVisiblePaginator = this.numberOfPaginators - this.numberOfVisiblePaginators;
              this.lastVisiblePaginator = this.numberOfPaginators;
            } else {
              this.lastVisiblePaginator = this.numberOfPaginators;
              this.firstVisiblePaginator = this.lastVisiblePaginator - (this.numberOfPaginators % this.numberOfVisiblePaginators);
            }
          }
        
          addPaginators() {
            if (this.tableData.length % this.itemsPerPage === 0) {
              this.numberOfPaginators = Math.floor(this.tableData.length / this.itemsPerPage);
            } else {
              this.numberOfPaginators = Math.floor(this.tableData.length / this.itemsPerPage + 1);
            }
        
            for (let i = 1; i <= this.numberOfPaginators; i++) {
              this.paginators.push(i);
            }
          }
        
          ngOnInit() {
            this.getData().subscribe(data => {
              this.tableData = data.json();
              this.addPaginators();
            });
          }
        }
        
  

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Pagination:
// For MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'
// For MDB Angular Free
import { WavesModule } from 'angular-bootstrap-md'