mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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.
This commit is contained in:
committed by
Jeremy Elbourn
parent
7024dc49f8
commit
c8743e70de
@@ -1,5 +1,5 @@
|
||||
<div class="mat-paginator-container">
|
||||
<div class="mat-paginator-page-size">
|
||||
<div class="mat-paginator-page-size" *ngIf="!hidePageSize">
|
||||
<div class="mat-paginator-page-size-label">
|
||||
{{_intl.itemsPerPageLabel}}
|
||||
</div>
|
||||
|
||||
@@ -264,6 +264,19 @@ describe('MatPaginator', () => {
|
||||
expect(withStringPaginator.pageSize).toEqual(10);
|
||||
expect(withStringPaginator.pageSizeOptions).toEqual([5, 10, 25, 100]);
|
||||
});
|
||||
|
||||
it('should be able to hide the page size select', () => {
|
||||
const element = fixture.nativeElement;
|
||||
|
||||
expect(element.querySelector('.mat-paginator-page-size'))
|
||||
.toBeTruthy('Expected select to be rendered.');
|
||||
|
||||
fixture.componentInstance.hidePageSize = true;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(element.querySelector('.mat-paginator-page-size'))
|
||||
.toBeNull('Expected select to be removed.');
|
||||
});
|
||||
});
|
||||
|
||||
function getPreviousButton(fixture: ComponentFixture<any>) {
|
||||
@@ -279,6 +292,7 @@ function getNextButton(fixture: ComponentFixture<any>) {
|
||||
<mat-paginator [pageIndex]="pageIndex"
|
||||
[pageSize]="pageSize"
|
||||
[pageSizeOptions]="pageSizeOptions"
|
||||
[hidePageSize]="hidePageSize"
|
||||
[length]="length"
|
||||
(page)="latestPageEvent = $event">
|
||||
</mat-paginator>
|
||||
@@ -288,6 +302,7 @@ class MatPaginatorApp {
|
||||
pageIndex = 0;
|
||||
pageSize = 10;
|
||||
pageSizeOptions = [5, 10, 25, 100];
|
||||
hidePageSize = false;
|
||||
length = 100;
|
||||
|
||||
latestPageEvent: PageEvent | null;
|
||||
|
||||
@@ -97,6 +97,9 @@ export class MatPaginator implements OnInit, OnDestroy {
|
||||
}
|
||||
private _pageSizeOptions: number[] = [];
|
||||
|
||||
/** Whether to hide the page size selection UI from the user. */
|
||||
@Input() hidePageSize = false;
|
||||
|
||||
/** Event emitted when the paginator changes the page size or page index. */
|
||||
@Output() page = new EventEmitter<PageEvent>();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user