Skip to content

Commit c8743e7

Browse files
crisbetojelbourn
authored andcommitted
feat(paginator): allow page size selection to be disabled (#8373)
Adds an input that allows the consumer to disable the page size selection entirely. Fixes #8359.
1 parent 7024dc4 commit c8743e7

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
@@ -264,6 +264,19 @@ describe('MatPaginator', () => {
264264
expect(withStringPaginator.pageSize).toEqual(10);
265265
expect(withStringPaginator.pageSizeOptions).toEqual([5, 10, 25, 100]);
266266
});
267+
268+
it('should be able to hide the page size select', () => {
269+
const element = fixture.nativeElement;
270+
271+
expect(element.querySelector('.mat-paginator-page-size'))
272+
.toBeTruthy('Expected select to be rendered.');
273+
274+
fixture.componentInstance.hidePageSize = true;
275+
fixture.detectChanges();
276+
277+
expect(element.querySelector('.mat-paginator-page-size'))
278+
.toBeNull('Expected select to be removed.');
279+
});
267280
});
268281

269282
function getPreviousButton(fixture: ComponentFixture<any>) {
@@ -279,6 +292,7 @@ function getNextButton(fixture: ComponentFixture<any>) {
279292
<mat-paginator [pageIndex]="pageIndex"
280293
[pageSize]="pageSize"
281294
[pageSizeOptions]="pageSizeOptions"
295+
[hidePageSize]="hidePageSize"
282296
[length]="length"
283297
(page)="latestPageEvent = $event">
284298
</mat-paginator>
@@ -288,6 +302,7 @@ class MatPaginatorApp {
288302
pageIndex = 0;
289303
pageSize = 10;
290304
pageSizeOptions = [5, 10, 25, 100];
305+
hidePageSize = false;
291306
length = 100;
292307

293308
latestPageEvent: PageEvent | null;

src/lib/paginator/paginator.ts

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

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

0 commit comments

Comments
 (0)