在ngx-pagination - angular 9上添加第一页和最后一页

npm install ngx-pagination --save

import { Component } from '@angular/core';
import { PaginationInstance } from 'ngx-pagination';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  public config: PaginationInstance = {
    id: 'custom',
    itemsPerPage: 10,
    currentPage: 1,
    totalItems: 100
  };
}

<pagination-controls (pageChange)="config.currentPage = $event"></pagination-controls>

<pagination-controls (pageChange)="config.currentPage = $event">
  <ng-template #customTemplate let-config="config">
    <ul class="pagination">
      <li class="page-item" [class.disabled]="config.currentPage === 1">
        <a class="page-link" (click)="config.currentPage = 1">第一页</a>
      </li>
      <li class="page-item" [class.disabled]="config.currentPage === config.totalPages">
        <a class="page-link" (click)="config.currentPage = config.totalPages">最后一页</a>
      </li>
      <li class="page-item" [class.disabled]="config.currentPage === 1">
        <a class="page-link" (click)="config.currentPage = config.currentPage - 1">上一页</a>
      </li>
      <li class="page-item" [class.disabled]="config.currentPage === config.totalPages">
        <a class="page-link" (click)="config.currentPage = config.currentPage + 1">下一页</a>
      </li>
    </ul>
  </ng-template>
</pagination-controls>