Sign in


Sign up


Angular Bootstrap pagination


<!--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">
  <h1 class="h1-responsive text-center my-5">MDB Angular Pagination - basic</h1>
  <!--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 = [
      { id: 1, title: 'Post 1' },
      { id: 2, title: 'Post 2' },
      { id: 3, title: 'Post 3' },
      { id: 4, title: 'Post 4' },
      { id: 5, title: 'Post 5' },
      { id: 6, title: 'Post 6' },
      { id: 7, title: 'Post 7' },
      { id: 8, title: 'Post 8' },
      { id: 9, title: 'Post 9' },
      { id: 10, title: 'Post 10' },
      { id: 11, title: 'Post 11' },
      { id: 12, title: 'Post 12' }
  ];

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

  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;
      console.log(firstPage);
      (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 ">
  <h1 class="h1-responsive text-center my-5">
    MDB Angular Pagination - Advanced usage
  </h1>
  <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<ElementRef>;
  @ViewChild('next') next: ElementRef;
  @ViewChild('prev') prev: ElementRef;
  data: any = [
    { id: 1, title: 'item 1' },
    { id: 2, title: 'item 2' },
    { id: 3, title: 'item 3' },
    { id: 4, title: 'item 4' },
    { id: 5, title: 'item 5' },
    { id: 6, title: 'item 6' },
    { id: 7, title: 'item 7' },
    { id: 8, title: 'item 8' },
    { id: 9, title: 'item 9' },
    { id: 10, title: 'item 10' },
    { id: 11, title: 'item 11' },
    { id: 12, title: 'item 12' },
    { id: 13, title: 'item 13' },
    { id: 14, title: 'item 14' },
    { id: 15, title: 'item 15' },
    { id: 16, title: 'item 16' },
    { id: 17, title: 'item 17' },
    { id: 18, title: 'item 18' },
    { id: 19, title: 'item 19' },
    { id: 20, title: 'item 20' },
    { id: 21, title: 'item 21' },
    { id: 22, title: 'item 22' },
    { id: 23, title: 'item 23' },
    { id: 24, title: 'item 24' },
    { id: 25, title: 'item 25' },
    { id: 26, title: 'item 26' },
    { id: 27, title: 'item 27' },
    { id: 28, title: 'item 28' },
    { id: 29, title: 'item 29' },
    { id: 30, title: 'item 30' },
    { id: 31, title: 'item 31' },
    { id: 32, title: 'item 32' },
    { id: 33, title: 'item 33' },
    { id: 34, title: 'item 34' },
    { id: 35, title: 'item 35' },
    { id: 36, title: 'item 35' },
    { id: 37, title: 'item 35' },
    { id: 38, title: 'item 35' },
    { id: 39, title: 'item 35' },
    { id: 40, title: 'item 35' },
    { id: 41, title: 'item 35' },
    { id: 42, title: 'item 35' },
    { id: 43, title: 'item 35' },
    { id: 44, title: 'item 35' },
    { id: 45, title: 'item 35' },
    { id: 46, title: 'item 35' },
    { id: 47, title: 'item 35' },
    { id: 48, title: 'item 35' },
    { id: 49, title: 'item 35' },
    { id: 50, title: 'item 35' },
    { id: 51, title: 'item 35' },
    { id: 52, title: 'item 35' },
    { id: 53, title: 'item 35' },
    { id: 54, title: 'item 35' },
    { id: 55, title: 'item 35' },
    { id: 56, title: 'item 35' },
    { id: 57, title: 'item 35' },
    { id: 58, title: 'item 35' },
    { id: 59, title: 'item 35' },
    { id: 60, title: 'item 35' },
    { id: 61, title: 'item 35' },
    { id: 62, title: 'item 35' },
    { id: 63, title: 'item 35' },
    { id: 64, title: 'item 35' },
    { id: 65, title: 'item 35' },
    { id: 66, title: 'item 35' },
    { id: 67, title: 'item 35' },
    { id: 68, title: 'item 35' },
    { id: 69, title: 'item 35' },
    { id: 70, title: 'item 35' },
    { id: 71, title: 'item 35' },
    { id: 72, title: 'item 35' },
    { id: 73, title: 'item 35' },
    { id: 74, title: 'item 35' },
    { id: 75, title: 'item 35' },
    { id: 76, title: 'item 35' },
    { id: 77, title: 'item 35' },
    { id: 78, title: 'item 35' },
    { id: 79, title: 'item 35' },
    { id: 80, title: 'item 35' },
    { id: 81, title: 'item 35' },
    { id: 82, title: 'item 35' },
    { id: 83, title: 'item 35' },
    { id: 84, title: 'item 35' },
    { id: 85, title: 'item 35' },
    { id: 86, title: 'item 35' },
    { id: 87, title: 'item 35' },
    { id: 88, title: 'item 35' },
    { id: 89, title: 'item 35' },
    { id: 90, title: 'item 35' },
    { id: 91, title: 'item 35' },
    { id: 92, title: 'item 35' },
    { id: 93, title: 'item 35' },
    { id: 94, title: 'item 35' },
    { id: 95, title: 'item 35' },
    { id: 96, title: 'item 35' },
    { id: 97, title: 'item 35' },
    { id: 98, title: 'item 35' },
    { id: 99, title: 'item 35' },
    { id: 100, title: 'item 35' },
  ];
  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 renderer: Renderer2) {

  }

  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 ">
  <h1 class="h1-responsive text-center my-5">
    MDB Angular Pagination - Data from API
  </h1>
  <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';

@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.http.get(this.url).map(res => res.json()).subscribe(next => {
      this.data = next;
    });
  }

  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;
  }
}