How an i change the pagination-control numbers(1 2 3) to other values like 'Anything1 Anything2 ...' using ngFor* on array in ngx-pagination?

Question

Is it possible to replace ngx-pagination's 'pagination-control'? By defaults, page numbers are showing like '1 2 3'. And I want to replace them with a string value in the array.

<pagination-controls (pageChange)="pageChange($event)" class="my-pagination"></pagination-controls>

The above code will display pagination numbers like

I want to replace the number with values from an array [Anything1, Anything2, Anything3]. Here my data is fixed and I know my page number count and its details.

Answer 1

You need to have look at custom template of ngx-pagination. In customization part you may try to add your Anything before {{page.label}}.

Custom Template example can be found here. http://michaelbromley.github.io/ngx-pagination/#/custom-template

<pagination-template #p="paginationApi"
                 [id]="config.id"
                 (pageChange)="config.currentPage = $event">


<div class="custom-pagination">
    <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>Anything{{ page.label }}</span>
        </a>
        <div *ngIf="p.getCurrent() === page.value">
            <span>Anything{{ page.label }}</span>
        </div>
    </div>

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

</pagination-template>