Skip to content
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/app/core/pagination/pagination-component-options.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
2 changes: 1 addition & 1 deletion src/app/shared/pagination/pagination.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
[page]="(currentPage$|async)"
(pageChange)="doPageChange($event)"
[pageSize]="(pageSize$ |async)"
[rotate]="paginationOptions.rotate"
Comment thread
alanorth marked this conversation as resolved.
[rotate]="true"
[size]="(isXs)?'sm':paginationOptions.size">
</ngb-pagination>
</div>
Expand Down
25 changes: 25 additions & 0 deletions src/app/shared/pagination/pagination.component.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
Loading