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

Question

I am using the ngx-pagination library for my angular app. Besides the previous and next button I want to add 2 more buttons to go directly on the last page or on the first page. How can I achieve this?

Template logic

 import { Component, OnInit } from '@angular/core'; import { TestimonialsDataService } from '../../services/testimonials-data.service'; @Component({ selector: 'app-card', templateUrl: './card.component.html', styleUrls: ['./card.component.scss'] }) export class CardComponent implements OnInit { public authors: Object = {}; public pageList: number = 1; constructor(private _testimonialsService: TestimonialsDataService) { } ngOnInit(): void { this._testimonialsService.getData().subscribe(data => this.authors = data); } }

 <div class="container"> <div class="content"> <div class="card" *ngFor="let author of authors['user'] | paginate: {id: 'list-pagination', itemsPerPage: 9, currentPage: pageList}" > <div class="card-content"> <img class="image" src="{{author.image}}"/> <p class="author">{{author.name}}</p> <p class="job">{{author.job}}</p> <p class="company"><a href="https://www.materahub.com/">{{author.company}}</a></p> <p class="country"><span class="flag flag-IT"></span><span class="country">{{author.country}}</span></p> </div> </div> </div> <pagination-controls id="list-pagination" lastLabel="Next" class="list-pagination" directionLinks="true" (pageChange)="pageList = $event"></pagination-controls> </div>

Answer 1

You can customize the pagination-template and try adding these buttons

    <pagination-template #p="paginationApi" [id]="config.id 
     (pageChange)="config.currentPage = $event">
            <div class="custom-pagination">
                <div class="pagination-first-page">
                  <span (click)="p.setCurrent(1)">
                    First Page 
                  </span> 
                </div>
              <div class="pagination-previous" [class.disabled]="p.isFirstPage()">
                <span *ngIf="!p.isFirstPage()" (click)="p.previous()">
                  < 
                    </span> 
                </div> 
                <div class="page-number" *ngFor="let page of p.pages" [class.current]="p.getCurrent() === page.value">
                      <span (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">{{ page.label }}</span>
                    <div *ngIf="p.getCurrent() === page.value">
                      <span>{{ page.label }}</span>
                    </div>
                </div>
                <div class="pagination-next" [class.disabled]="p.isLastPage()">
                  <span *ngIf="!p.isLastPage()" (click)="p.next()"> > </span>
                </div>
                <div class="pagination-last-page">
                  <span (click)="p.setCurrent(p.getLastPage())">
                    Last Page 
                  </span> 
                </div>
            </div>
        
          </pagination-template>