Pagination Component with Angular

app.component.html

<div class="card">
  <div class="card-body">
    <app-pagination #pagination [collectionSize]="tableContent.length" [pageSize]="10" [firstLastButtons]="true" [maxSize]="2">
    </app-pagination>

    <table class="table table-sm">
      <tbody>
        <tr
          *ngFor="let t of tableContent | slice : (pagination.currentPage - 1) * pagination.pageSize : pagination.currentPage * pagination.pageSize">
          <td>{{ t.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  tableContent = [];

  ngOnInit() {
    for (let i = 0; i < 10000; i++) {
      this.tableContent.push({
        id: i + 1,
        name: `content-${i + 1}`,
      });
    }
  }
}

pagination.component.html

<nav>
    <ul [class]="small ? 'pagination pagination-sm' : 'pagination'">
        <!-- first button -->
        <li [class]="currentPage === 1 ? 'page-item disabled' : 'page-item'" *ngIf="firstLastButtons">
            <button class="page-link" (click)="selectPageNumber(1)">««</button>
        </li>
        <!-- previous button -->
        <li [class]="currentPage === 1 ? 'page-item disabled' : 'page-item'" *ngIf="nextPreviousButtons">
            <button class="page-link" (click)="previous()">«</button>
        </li>
        <!-- page numbers -->
        <ng-container *ngFor="let p of totalPages; index as i">
            <li *ngIf="i + 1 >= (currentPage - maxSize) && i + 1 <= (currentPage + maxSize)"
                [class]="currentPage === (i  + 1) ? 'page-item active' : 'page-item'">
                <button class="page-link" (click)="selectPageNumber(i + 1)">{{i + 1}}</button>
            </li>
        </ng-container>
        <!-- next button -->
        <li [class]="currentPage === totalPages.length ? 'page-item disabled' : 'page-item'"
            *ngIf="nextPreviousButtons">
            <button class="page-link" (click)="next()">»</button>
        </li>
        <!-- last button -->
        <li [class]="currentPage === totalPages.length ? 'page-item disabled' : 'page-item'" *ngIf="firstLastButtons">
            <button class="page-link" (click)="selectPageNumber(totalPages.length)">»»</button>
        </li>
    </ul>
</nav>

pagination.component.ts

import { Component, Input, OnInit, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css'],
})
export class PaginationComponent implements OnInit {
  /** The total number of records */
  @Input()
  collectionSize = 0;

  /** The number of records to display */
  @Input()
  pageSize = 5;

  /** Current page */
  @Input()
  currentPage = 1;

  /** The number of buttons to show either side of the current page */
  @Input()
  maxSize = 2;

  /** Display the First/Last buttons */
  @Input()
  firstLastButtons = false;

  /** Display the Next/Previous buttons */
  @Input()
  nextPreviousButtons = true;

  /** Display small pagination buttons */
  @Input()
  small = false;

  totalPages: any[] = [];

  constructor() {}

  ngOnInit(): void {
    this.totalPages = new Array(Math.ceil(this.collectionSize / this.pageSize));
  }

  /** Update totalPage number if the collectionSize or pageSize values change */
  ngOnChanges(changes: SimpleChanges) {
    this.totalPages = new Array(Math.ceil(this.collectionSize / this.pageSize));
  }

  /** Set page number */
  selectPageNumber(pageNumber: number) {
    this.currentPage = pageNumber;
  }

  /** Set next page number */
  next() {
    const nextPage = this.currentPage + 1;
    nextPage <= this.totalPages.length && this.selectPageNumber(nextPage);
  }

  /** Set previous page number */
  previous() {
    const previousPage = this.currentPage - 1;
    previousPage >= 1 && this.selectPageNumber(previousPage);
  }
}