diff --git a/src/material-experimental/mdc-paginator/paginator.spec.ts b/src/material-experimental/mdc-paginator/paginator.spec.ts index 73287748b1f0..1b584000606a 100644 --- a/src/material-experimental/mdc-paginator/paginator.spec.ts +++ b/src/material-experimental/mdc-paginator/paginator.spec.ts @@ -511,6 +511,13 @@ describe('MDC-based MatPaginator', () => { const hostElement = fixture.nativeElement.querySelector('mat-paginator'); expect(hostElement.getAttribute('role')).toBe('group'); }); + + it('should handle the page size options input being passed in as readonly array', () => { + const fixture = createComponent(MatPaginatorWithReadonlyOptions); + fixture.detectChanges(); + + expect(fixture.componentInstance.paginator._displayedPageSizeOptions).toEqual([5, 10, 25, 100]); + }); }); function getPreviousButton(fixture: ComponentFixture) { @@ -600,3 +607,14 @@ class MatPaginatorWithoutOptionsApp { class MatPaginatorWithStringValues { @ViewChild(MatPaginator) paginator: MatPaginator; } + +@Component({ + template: ` + + + `, +}) +class MatPaginatorWithReadonlyOptions { + @ViewChild(MatPaginator) paginator: MatPaginator; + pageSizeOptions: readonly number[] = [5, 10, 25, 100]; +} diff --git a/src/material/paginator/paginator.spec.ts b/src/material/paginator/paginator.spec.ts index 84bdb4e64b68..540c38187cd7 100644 --- a/src/material/paginator/paginator.spec.ts +++ b/src/material/paginator/paginator.spec.ts @@ -506,6 +506,13 @@ describe('MatPaginator', () => { const hostElement = fixture.nativeElement.querySelector('mat-paginator'); expect(hostElement.getAttribute('role')).toBe('group'); }); + + it('should handle the page size options input being passed in as readonly array', () => { + const fixture = createComponent(MatPaginatorWithReadonlyOptions); + fixture.detectChanges(); + + expect(fixture.componentInstance.paginator._displayedPageSizeOptions).toEqual([5, 10, 25, 100]); + }); }); function getPreviousButton(fixture: ComponentFixture) { @@ -595,3 +602,14 @@ class MatPaginatorWithoutOptionsApp { class MatPaginatorWithStringValues { @ViewChild(MatPaginator) paginator: MatPaginator; } + +@Component({ + template: ` + + + `, +}) +class MatPaginatorWithReadonlyOptions { + @ViewChild(MatPaginator) paginator: MatPaginator; + pageSizeOptions: readonly number[] = [5, 10, 25, 100]; +} diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts index 894fcbb6ee37..a676f8660519 100644 --- a/src/material/paginator/paginator.ts +++ b/src/material/paginator/paginator.ts @@ -149,7 +149,7 @@ export abstract class _MatPaginatorBase< get pageSizeOptions(): number[] { return this._pageSizeOptions; } - set pageSizeOptions(value: number[]) { + set pageSizeOptions(value: number[] | readonly number[]) { this._pageSizeOptions = (value || []).map(p => coerceNumberProperty(p)); this._updateDisplayedPageSizeOptions(); } diff --git a/tools/public_api_guard/material/paginator.md b/tools/public_api_guard/material/paginator.md index ae8499d5d8ac..e8051239094d 100644 --- a/tools/public_api_guard/material/paginator.md +++ b/tools/public_api_guard/material/paginator.md @@ -83,7 +83,7 @@ export abstract class _MatPaginatorBase