fix(material/paginator): allow readonly options (#24054)

closes #24050

Author: lekhmanrus

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<any>) {
@@ -600,3 +607,14 @@ class MatPaginatorWithoutOptionsApp {
 class MatPaginatorWithStringValues {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 }
+
+@Component({
+  template: `
+    <mat-paginator [pageSizeOptions]="pageSizeOptions">
+    </mat-paginator>
+  `,
+})
+class MatPaginatorWithReadonlyOptions {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  pageSizeOptions: readonly number[] = [5, 10, 25, 100];
+}

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<any>) {
@@ -595,3 +602,14 @@ class MatPaginatorWithoutOptionsApp {
 class MatPaginatorWithStringValues {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 }
+
+@Component({
+  template: `
+    <mat-paginator [pageSizeOptions]="pageSizeOptions">
+    </mat-paginator>
+  `,
+})
+class MatPaginatorWithReadonlyOptions {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  pageSizeOptions: readonly number[] = [5, 10, 25, 100];
+}

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();
   }

tools/public_api_guard/material/paginator.md

@@ -83,7 +83,7 @@ export abstract class _MatPaginatorBase<O extends {
     get pageSize(): number;
     set pageSize(value: NumberInput);
     get pageSizeOptions(): number[];
-    set pageSizeOptions(value: number[]);
+    set pageSizeOptions(value: number[] | readonly number[]);
     _previousButtonsDisabled(): boolean;
     previousPage(): void;
     get showFirstLastButtons(): boolean;