Skip to content

Commit 1e062f3

Browse files
committed
feat(paginator): allow page size selection to be disabled
Adds an input that allows the consumer to disable the page size selection entirely. Fixes #8359.
1 parent 65cd1a1 commit 1e062f3

File tree

3 files changed

+19
-1
lines changed

3 files changed

+19
-1
lines changed

src/lib/paginator/paginator.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="mat-paginator-container">
2-
<div class="mat-paginator-page-size">
2+
<div class="mat-paginator-page-size" *ngIf="!hidePageSize">
33
<div class="mat-paginator-page-size-label">
44
{{_intl.itemsPerPageLabel}}
55
</div>

src/lib/paginator/paginator.spec.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,19 @@ describe('MatPaginator', () => {
251251
fixture.detectChanges();
252252
expect(fixture.nativeElement.querySelector('.mat-select')).toBeNull();
253253
});
254+
255+
it('should be able to hide the page size select', () => {
256+
const element = fixture.nativeElement;
257+
258+
expect(element.querySelector('.mat-paginator-page-size'))
259+
.toBeTruthy('Expected select to be rendered.');
260+
261+
fixture.componentInstance.hidePageSize = false;
262+
fixture.detectChanges();
263+
264+
expect(element.querySelector('.mat-paginator-page-size'))
265+
.toBeNull('Expected select to be removed.');
266+
});
254267
});
255268

256269
function getPreviousButton(fixture: ComponentFixture<any>) {
@@ -266,6 +279,7 @@ function getNextButton(fixture: ComponentFixture<any>) {
266279
<mat-paginator [pageIndex]="pageIndex"
267280
[pageSize]="pageSize"
268281
[pageSizeOptions]="pageSizeOptions"
282+
[hidePageSize]="hidePageSize"
269283
[length]="length"
270284
(page)="latestPageEvent = $event">
271285
</mat-paginator>
@@ -275,6 +289,7 @@ class MatPaginatorApp {
275289
pageIndex = 0;
276290
pageSize = 10;
277291
pageSizeOptions = [5, 10, 25, 100];
292+
hidePageSize = true;
278293
length = 100;
279294

280295
latestPageEvent: PageEvent | null;

src/lib/paginator/paginator.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,9 @@ export class MatPaginator implements OnInit, OnDestroy {
9696
}
9797
private _pageSizeOptions: number[] = [];
9898

99+
/** Whether to hide the page size selection UI from the user. */
100+
@Input() hidePageSize = false;
101+
99102
/** Event emitted when the paginator changes the page size or page index. */
100103
@Output() page = new EventEmitter<PageEvent>();
101104

0 commit comments

Comments
 (0)