如何使用 Angular 获取 ngx-pagination 中的最后页码

Question

How can we work with Custom templates in ngx-pagination, and get the first and last button worked when clicked, I have used pagination-template to achieve the same...

how can I find the last page number dynamically?,

<ul class="meal-list">
  <li *ngFor="let meal of meals | paginate: config">
    {{ meal.id }}
    {{ meal.name }}
  </li>
</ul>

<pagination-template
  #p="paginationApi"
  [id]="config.id"
  (pageChange)="config.currentPage = $event"
>
  <div class="custom-pagination">
    <div class="pagination-first" [class.fade]="p.isFirstPage()">
      <a *ngIf="!p.isFirstPage()" (click)="p.setCurrent(1)">First</a>
    </div>
    <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
      <a *ngIf="!p.isFirstPage()" (click)="p.previous()"> < </a>
    </div>

    <div
      *ngFor="let page of p.pages"
      [class.current]="p.getCurrent() === page.value"
    >
      <a
        (click)="p.setCurrent(page.value)"
        *ngIf="p.getCurrent() !== page.value"
      >
        <span>{{ page.label }}</span>
      </a>
      <div *ngIf="p.getCurrent() === page.value">
        <span>{{ page.label }}</span>
      </div>
    </div>

    <div class="pagination-next" [class.disabled]="p.isLastPage()">
      <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
    </div>
    <div class="pagination-last" [class.disabled]="p.isLastPage()">
      <a *ngIf="!p.isLastPage()" (click)="p.setCurrent(4)">Last</a>
    </div>
  </div>
</pagination-template>

Answer 1

You can achieve that using setCurrent and getLastPage together

example

<div class="pagination-last" [class.disabled]="p.isLastPage()">
  <a *ngIf="!p.isLastPage()" (click)="p.setCurrent(p.getLastPage())">Last</a>
</div>