Adding first page and last page on ngx-pagination - 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>

Prasad Rao · Answer 1 · 2021-08-31T08:53:31.250

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>

Adding first page and last page on ngx-pagination - angular 9

1 Answers1