Page links are not working inside a modal

[muriloebsantos]

Angular version: 11

ngx-pagination version: 5.0.0

Description of issue: Page links are not working inside a modal

Steps to reproduce:

Place the pagination control inside a modal. In my case I'm using a NbDialogService from Nebular. The next and previous page buttons work normally. I'm using the pagination pipe.

Table code:

<tr *ngFor="let produto of produtos | paginate: { itemsPerPage: tamanhoPagina, currentPage: pagina, totalItems: totalRegistros }">

Pagination code <pagination-controls previousLabel="Anterior" nextLabel="Próxima" (pageChange)="carregarProdutos($event)"></pagination-controls>

Expected result:

Should emit pageChange handler.

Actual result:

Nothing happens, neither errors.

[muriloebsantos]

The issue is that there were two paging controls in the view: one behind the modal, and one into the modal.

To fix this, you should provide an id for the paging controls, and pass it as an attribute in the pipe (do it for both):

<pagination-controls id="selecaoProdutos" previousLabel="Anterior" nextLabel="Próxima" (pageChange)="carregarSelecoesDeProduto($event)"></pagination-controls>

<tr *ngFor="let produto of produtos | paginate: { id: 'selecaoProdutos', itemsPerPage: tamanhoPagina, currentPage: pagina, totalItems: totalRegistros }">