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">
        <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">
        <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.


<main class="container mx-auto text-center ">
  <h2 class="h1 h1-responsive text-center my-5">
    MDB Angular Pagination - Advanced usage
    </h2>
  <div class="row">
    <div class="col-md-6 mx-auto mt-5">

      <nav class="d-flex justify-content-center my-4 mx-auto text-center">
        <ul class="pagination pagination-circle pg-blue mb-0 text-center">

          <!--First-->
          <li class="page-item">
            <a class="page-link" mdbWavesEffect (click)="firstPage()">First</a>
          </li>

          <li #prev class="page-item">
            <button type="button" class="page-link" mdbWavesEffect aria-label="Previous" (click)="prevPage($event)">«</button>
          </li>


          <li #pages *ngFor="let pageItem of pagination" class="page-item paginator">
            <span>
              <a class="page-link" (click)="clearActive()" mdbWavesEffect>{{pageItem}}</a>
            </span>
          </li>

          <li #next class="page-item">
            <button class="page-link" mdbWavesEffect aria-label="Next" (click)="nextPage($event)">»</button>
          </li>

          <!--Last-->
          <li class="page-item">
            <a class="page-link" (click)="lastPage()" mdbWavesEffect>Last</a>
          </li>

        </ul>
      </nav>
    </div>
  </div>
  <div class="row">
      <div class="col-md-6 mx-auto">
        <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 data">
              <th *ngIf="post.id >= firstElement && post.id <= lastElement" scope="row">{{post.id}}</th>
              <td *ngIf="post.id >= firstElement && post.id <= lastElement">{{post.title}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</main>
	

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

@Component({
  selector: 'app-pagination-advanced',
  templateUrl: './pagination-advanced.component.html',
  styleUrls: ['./pagination-advanced.component.scss']
})
export class PaginationAdvancedComponent implements AfterViewInit, OnInit, AfterContentChecked {
@ViewChildren('pages') pages: QueryList;
  @ViewChild('next') next: ElementRef;
  @ViewChild('prev') prev: ElementRef;
  data: any = [ ];
  pagination: Array = [];
  activePage: number;
  firstElement: number = null;
  lastElement: number = null;
  nextElements = [];
  nextElementsCounter = 0;
  firstActiveElement = null;

  @HostListener('click', ['$event']) onclick(event: any) {
    this.renderer.addClass(event.target.parentElement.parentElement, 'active');
    this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
    if (event.target.parentElement.innerText >= 1 || event.target.parentElement.innerText <= 10) {
      this.getFirstAndLastElement(event);

    }
    if (!this.pages.first.nativeElement.classList.contains('active')) {
      this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
      this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
    }

  }

  constructor(private renderer: Renderer2) {
    for (let i = 0; i <= 100; i++) {
      this.data.push({id: i, title: 'Item ' + i});
    }
  }

  ngOnInit() {
    let paginationLength;
    setTimeout(() => {
      paginationLength = this.data.length / 10;
      // Setting up paginators (clickable pages)
      for (let i = 1; i <= paginationLength; i++) {
        this.pagination.push(i);
      }
    }, 1000);

  }

  ngAfterViewInit() {
    this.renderer.setAttribute(this.prev.nativeElement.firstElementChild, 'disabled', 'true');
    setTimeout(() => {
      this.pages.forEach(element => {
        this.nextElements.push(element);
      });
      this.renderer.addClass(this.pages.first.nativeElement, 'active');
      this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
      this.activePage = this.firstActiveElement.nativeElement.innerText;
      this.firstElement = (+this.activePage) * 10 - 10 + 1;
      this.lastElement = (+this.activePage) * 10;
    }, 1000);

  }

  ngAfterContentChecked() {
    setTimeout(() => {
      if (this.pages.first.nativeElement.classList.contains('active')) {
        this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
        this.renderer.setAttribute(this.prev.nativeElement.firstElementChild, 'disabled', 'true');
      }

      if (this.pages.last.nativeElement.classList.contains('active')) {
        this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
        this.renderer.setAttribute(this.next.nativeElement.firstElementChild, 'disabled', 'true');
      }
    }, 1000);

  }

  getActivePage(event: any) {
    return this.activePage = event.target.parentElement.innerText;
  }

  getFirstAndLastElement(event: any) {
    this.getFirstElement(event);
    this.getLastElement(event);
  }

  getFirstElement(event: any) {
    return this.firstElement = this.getActivePage(event) * 10 - 10 + 1;
  }

  getLastElement(event: any) {
    return this.lastElement = this.getActivePage(event) * 10;
  }


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

  firstPage() {
    this.clearActive();
    this.renderer.addClass(this.pages.first.nativeElement, 'active');

    this.activePage = this.pages.first.nativeElement.innerText;
    this.firstElement = this.activePage * 10 - 10 + 1;
    this.lastElement = this.activePage * 10;
  }

  lastPage() {
    this.clearActive();
    this.renderer.addClass(this.pages.last.nativeElement, 'active');

    this.activePage = this.pages.last.nativeElement.innerText;
    this.firstElement = this.activePage * 10 - 10 + 1;
    this.lastElement = this.activePage * 10;
  }

  nextPage(event: any) {
    this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
    try {
      if (this.firstActiveElement) {
        // Finds first active element (with class .active)
        this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
        this.activePage = this.firstActiveElement.nativeElement.innerText;
        this.firstElement = (+this.activePage + 1) * 10 - 10 + 1;
        this.lastElement = (+this.activePage + 1) * 10;
      }
    } catch (error) {

    }

    if (this.firstActiveElement != undefined) {
      this.renderer.removeClass(this.firstActiveElement.nativeElement, 'active');
      this.renderer.addClass(this.firstActiveElement.nativeElement.nextElementSibling, 'active');
    } else {
      if (this.nextElements[0].nativeElement.classList.contains('active')) {
        this.renderer.removeClass(this.nextElements[0].nativeElement, 'active');
      }
      if (this.nextElements[0] === undefined) {
        this.nextElementsCounter++;
      }
      if (this.nextElementsCounter !== 0) {
        this.renderer.removeClass(this.nextElements[(this.nextElementsCounter - 1)].nativeElement, 'active');
      }
      this.renderer.addClass(this.nextElements[this.nextElementsCounter++].nativeElement, 'active');

      try {
        this.activePage = +this.pages.first.nativeElement.innerText;
        this.firstElement = this.activePage * 10 - 10 + 1;
        this.lastElement = this.activePage * 10;
      } catch (error) {
      }
    }
  }

  prevPage(event: any) {
    this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
    this.renderer.removeClass(this.firstActiveElement.nativeElement, 'active');
    this.renderer.addClass(this.firstActiveElement.nativeElement.previousElementSibling, 'active');
    this.activePage = +this.firstActiveElement.nativeElement.innerText - 1;
    this.firstElement = (+this.activePage) * 10 - 10 + 1;
    this.lastElement = (+this.activePage) * 10;
  }
}
  

Usage - Advanced with data from API

Advanced exampel with data coming from foreign API.


<main class="container mx-auto text-center ">
  <h2 class="h1 h1-responsive text-center my-5">
    MDB Angular Pagination - Data from API
    </h2>
  <div class="row">
    <div class="col-md-6 mx-auto mt-5">

      <nav class="d-flex justify-content-center my-4 mx-auto text-center">
        <ul class="pagination pagination-circle pg-blue mb-0 text-center">

          <!--First-->
          <li class="page-item">
            <a class="page-link" mdbWavesEffect (click)="firstPage()">First</a>
          </li>

          <li #prev class="page-item">
            <button type="button" class="page-link" mdbWavesEffect aria-label="Previous" (click)="prevPage($event)">«</button>
          </li>


          <li #pages *ngFor="let pageItem of pagination" class="page-item paginator">
            <span>
              <a class="page-link" (click)="clearActive()" mdbWavesEffect>{{pageItem}}</a>
            </span>
          </li>

          <li #next class="page-item">
            <button class="page-link" mdbWavesEffect aria-label="Next" (click)="nextPage($event)">»</button>
          </li>

          <!--Last-->
          <li class="page-item">
            <a class="page-link" (click)="lastPage()" mdbWavesEffect>Last</a>
          </li>

        </ul>
      </nav>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6 mx-auto">
      <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 data">
            <th *ngIf="post.id >= firstElement && post.id <= lastElement" scope="row">{{post.id}}</th>
            <td *ngIf="post.id >= firstElement && post.id <= lastElement">{{post.title}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</main>
	

import { Component, OnInit, AfterContentChecked, AfterViewInit, QueryList, ElementRef, ViewChildren, HostListener, Renderer2, ViewChild } 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 AfterViewInit, OnInit, AfterContentChecked {
  @ViewChildren('pages') pages: QueryList<ElementRef>;
  @ViewChild('next') next: ElementRef;
  @ViewChild('prev') prev: ElementRef;
  url = 'https://jsonplaceholder.typicode.com/posts';
  data;
  pagination: Array<any> = [];
  activePage: number;
  firstElement: number = null;
  lastElement: number = null;
  nextElements = [];
  nextElementsCounter = 0;
  firstActiveElement = null;

  @HostListener('click', ['$event']) onclick(event: any) {
    this.renderer.addClass(event.target.parentElement.parentElement, 'active');
    this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
    if (event.target.parentElement.innerText >= 1 || event.target.parentElement.innerText <= 10) {
      this.getFirstAndLastElement(event);

    }
    if (!this.pages.first.nativeElement.classList.contains('active')) {
      this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
      this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
    }
  }

  constructor(private http: Http, private renderer: Renderer2) {
    this.getData().subscribe(next => {
      this.data = next.json();
    });
  }

  getData(): Observable<any> {
    return this.http.get(this.url);
  }

  ngOnInit() {
    let paginationLength;
    setTimeout(() => {
      paginationLength = this.data.length / 10;
      // Setting up paginators (clickable pages)
      for (let i = 1; i <= paginationLength; i++) {
        this.pagination.push(i);
      }
    }, 1000);

  }

  ngAfterViewInit() {
    this.renderer.setAttribute(this.prev.nativeElement.firstElementChild, 'disabled', 'true');
    setTimeout(() => {
      this.pages.forEach(element => {
        this.nextElements.push(element);
      });
      this.renderer.addClass(this.pages.first.nativeElement, 'active');
      this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
      this.activePage = this.firstActiveElement.nativeElement.innerText;
      this.firstElement = (+this.activePage) * 10 - 10 + 1;
      this.lastElement = (+this.activePage) * 10;
    }, 1000);

  }

  ngAfterContentChecked() {
    setTimeout(() => {
      if (this.pages.first.nativeElement.classList.contains('active')) {
        this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
        this.renderer.setAttribute(this.prev.nativeElement.firstElementChild, 'disabled', 'true');
      }

      if (this.pages.last.nativeElement.classList.contains('active')) {
        this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
        this.renderer.setAttribute(this.next.nativeElement.firstElementChild, 'disabled', 'true');
      }
    }, 1000);

  }

  getActivePage(event: any) {
    return this.activePage = event.target.parentElement.innerText;
  }

  getFirstAndLastElement(event: any) {
    this.getFirstElement(event);
    this.getLastElement(event);
  }

  getFirstElement(event: any) {
    return this.firstElement = this.getActivePage(event) * 10 - 10 + 1;
  }

  getLastElement(event: any) {
    return this.lastElement = this.getActivePage(event) * 10;
  }


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

  firstPage() {
    this.clearActive();
    this.renderer.addClass(this.pages.first.nativeElement, 'active');

    this.activePage = this.pages.first.nativeElement.innerText;
    this.firstElement = this.activePage * 10 - 10 + 1;
    this.lastElement = this.activePage * 10;
  }

  lastPage() {
    this.clearActive();
    this.renderer.addClass(this.pages.last.nativeElement, 'active');

    this.activePage = this.pages.last.nativeElement.innerText;
    this.firstElement = this.activePage * 10 - 10 + 1;
    this.lastElement = this.activePage * 10;
  }

  nextPage(event: any) {
    this.renderer.removeAttribute(this.prev.nativeElement.firstElementChild, 'disabled');
    try {
      if (this.firstActiveElement) {
        // Finds first active element (with class .active)
        this.firstActiveElement = this.pages.find(element => element.nativeElement.classList.contains('active'));
        this.activePage = this.firstActiveElement.nativeElement.innerText;
        this.firstElement = (+this.activePage + 1) * 10 - 10 + 1;
        this.lastElement = (+this.activePage + 1) * 10;
      }
    } catch (error) {

    }

    if (this.firstActiveElement != undefined) {
      this.renderer.removeClass(this.firstActiveElement.nativeElement, 'active');
      this.renderer.addClass(this.firstActiveElement.nativeElement.nextElementSibling, 'active');
    } else {
      if (this.nextElements[0].nativeElement.classList.contains('active')) {
        this.renderer.removeClass(this.nextElements[0].nativeElement, 'active');
      }
      if (this.nextElements[0] === undefined) {
        this.nextElementsCounter++;
      }
      if (this.nextElementsCounter !== 0) {
        this.renderer.removeClass(this.nextElements[(this.nextElementsCounter - 1)].nativeElement, 'active');
      }
      this.renderer.addClass(this.nextElements[this.nextElementsCounter++].nativeElement, 'active');

      try {
        this.activePage = +this.pages.first.nativeElement.innerText;
        this.firstElement = this.activePage * 10 - 10 + 1;
        this.lastElement = this.activePage * 10;
      } catch (error) {
      }
    }
  }

  prevPage(event: any) {this.renderer.removeAttribute(this.next.nativeElement.firstElementChild, 'disabled');
    this.renderer.removeClass(this.firstActiveElement.nativeElement, 'active');
    this.renderer.addClass(this.firstActiveElement.nativeElement.previousElementSibling, 'active');
    this.activePage = +this.firstActiveElement.nativeElement.innerText - 1;
    this.firstElement = (+this.activePage) * 10 - 10 + 1;
    this.lastElement = (+this.activePage) * 10;
  }
}
  

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'