diff --git a/src/app/core/pagination/pagination-component-options.model.ts b/src/app/core/pagination/pagination-component-options.model.ts index 14713cfde52..be21be74551 100644 --- a/src/app/core/pagination/pagination-component-options.model.ts +++ b/src/app/core/pagination/pagination-component-options.model.ts @@ -19,6 +19,12 @@ export class PaginationComponentOptions extends NgbPaginationConfig { */ maxSize = 10; + /** + * Whether to rotate pages towards the current page. + * Ensures the active page is always visible in the pagination control. + */ + rotate = true; + /** * A number array that represents options for a context pagination limit. */ diff --git a/src/app/shared/pagination/pagination.component.spec.ts b/src/app/shared/pagination/pagination.component.spec.ts index 5d80260b530..410e013cc02 100644 --- a/src/app/shared/pagination/pagination.component.spec.ts +++ b/src/app/shared/pagination/pagination.component.spec.ts @@ -317,6 +317,31 @@ describe('Pagination component', () => { expect(de.nativeElement.classList.contains('pagination-sm')).toBeTruthy(); }); }); + + it('should show surrounding pages when navigating to a later page', () => { + testComp.collectionSize = 200; + testComp.paginationOptions.maxSize = 5; + testFixture.detectChanges(); + + currentPagination.next(Object.assign(new PaginationComponentOptions(), pagination, { currentPage: 10 })); + testFixture.detectChanges(); + + const paginationDe = testFixture.debugElement.query(By.css('.pagination')); + const activePage = paginationDe.nativeElement.querySelector('li.active'); + expect(activePage).toBeTruthy(); + expect(activePage.textContent.trim()).toContain('10'); + + const allPages = paginationDe.nativeElement.querySelectorAll('li'); + const pageNumbers = Array.from(allPages).map((li: any) => + li.textContent.trim().replace(/\s+/g, ''), + ).filter(t => /^\d+$/.test(t)); + + expect(pageNumbers).toContain('8'); + expect(pageNumbers).toContain('9'); + expect(pageNumbers).toContain('10'); + expect(pageNumbers).toContain('11'); + expect(pageNumbers).toContain('12'); + }); }); describe('when showPaginator is true', () => {