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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.