Dear Rastogi,

Here's the exact code which is used on the page which have you provided:

.html:

<div class="container">
  <div class="row">
    <div class="col-md-6 mx-auto mt-5">
      <h2 class="text-center">Angular Bootstrap Pagination</h2>
    </div>
  </div>

  <div class="row">
    <!-- Basic Example -->
    <div class="col-md-10 mx-auto my-5">
      <h4 class="text-center">API Example</h4>
      <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 flex-wrap">

              <!--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()" [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()" [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>
    </div>
  </div>
</div>

.ts:

import { Component, OnInit, ViewChildren, QueryList } from '@angular/core';
import { HttpClient } from '@angular/common/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: HttpClient) {}

  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() {
    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() {
    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;
      this.addPaginators();
    });
  }

}

Best Regards,

Damian