diff --git a/src/material/paginator/paginator.html b/src/material/paginator/paginator.html
index 4276c8067ebb..0121a33978f1 100644
--- a/src/material/paginator/paginator.html
+++ b/src/material/paginator/paginator.html
@@ -12,9 +12,12 @@
-
+
{{pageSizeOption}}
diff --git a/src/material/paginator/paginator.md b/src/material/paginator/paginator.md
index 4359b57dc7a1..9e37b083e856 100644
--- a/src/material/paginator/paginator.md
+++ b/src/material/paginator/paginator.md
@@ -16,7 +16,11 @@ any associated data view.
The paginator displays a dropdown of page sizes for the user to choose from. The options for this
dropdown can be set via `pageSizeOptions`
-The current pageSize will always appear in the dropdown, even if it is not included in pageSizeOptions.
+The current pageSize will always appear in the dropdown, even if it is not included in
+pageSizeOptions.
+
+If you want to customize some of the optional of the `mat-select` inside the `mat-paginator`, you
+can use the `selectConfig` input.
### Internationalization
The labels for the paginator can be customized by providing your own instance of `MatPaginatorIntl`.
@@ -26,4 +30,5 @@ This will allow you to change the following:
3. The tooltip messages on the navigation buttons.
### Accessibility
-The `aria-label`s for next page, previous page, first page and last page buttons can be set in `MatPaginatorIntl`.
+The `aria-label`s for next page, previous page, first page and last page buttons can be set in
+`MatPaginatorIntl`.
diff --git a/src/material/paginator/paginator.spec.ts b/src/material/paginator/paginator.spec.ts
index 1773ef92b23e..c1b8af0c58bc 100644
--- a/src/material/paginator/paginator.spec.ts
+++ b/src/material/paginator/paginator.spec.ts
@@ -5,8 +5,14 @@ import {dispatchMouseEvent} from '@angular/cdk/testing/private';
import {ThemePalette} from '@angular/material/core';
import {MatSelect} from '@angular/material/select';
import {By} from '@angular/platform-browser';
-import {MatPaginatorModule, MatPaginator, MatPaginatorIntl} from './index';
-import {MAT_PAGINATOR_DEFAULT_OPTIONS, MatPaginatorDefaultOptions} from './paginator';
+import {
+ MatPaginatorModule,
+ MatPaginator,
+ MatPaginatorIntl,
+ MatPaginatorSelectConfig,
+ MAT_PAGINATOR_DEFAULT_OPTIONS,
+ MatPaginatorDefaultOptions,
+} from './index';
describe('MatPaginator', () => {
@@ -186,6 +192,24 @@ describe('MatPaginator', () => {
expect(formField.classList).toContain('mat-accent');
});
+ it('should be able to pass options to the underlying mat-select', () => {
+ const fixture = createComponent(MatPaginatorApp);
+ fixture.detectChanges();
+ const select: MatSelect = fixture.debugElement.query(By.directive(MatSelect)).componentInstance;
+
+ expect(select.disableOptionCentering).toBe(false);
+ expect(select.panelClass).toBeFalsy();
+
+ fixture.componentInstance.selectConfig = {
+ disableOptionCentering: true,
+ panelClass: 'custom-class'
+ };
+ fixture.detectChanges();
+
+ expect(select.disableOptionCentering).toBe(true);
+ expect(select.panelClass).toBe('custom-class');
+ });
+
describe('when showing the first and last button', () => {
let fixture: ComponentFixture;
let component: MatPaginatorApp;
@@ -488,6 +512,7 @@ function getLastButton(fixture: ComponentFixture) {
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
[hidePageSize]="hidePageSize"
+ [selectConfig]="selectConfig"
[showFirstLastButtons]="showFirstLastButtons"
[length]="length"
[color]="color"
@@ -506,6 +531,7 @@ class MatPaginatorApp {
disabled: boolean;
pageEvent = jasmine.createSpy('page event');
color: ThemePalette;
+ selectConfig: MatPaginatorSelectConfig = {};
@ViewChild(MatPaginator) paginator: MatPaginator;
diff --git a/src/material/paginator/paginator.ts b/src/material/paginator/paginator.ts
index e014487ae9a7..edd767e98f04 100644
--- a/src/material/paginator/paginator.ts
+++ b/src/material/paginator/paginator.ts
@@ -82,6 +82,16 @@ export interface MatPaginatorDefaultOptions {
export const MAT_PAGINATOR_DEFAULT_OPTIONS =
new InjectionToken('MAT_PAGINATOR_DEFAULT_OPTIONS');
+
+/** Object that can used to configure the underlying `MatSelect` inside a `MatPaginator`. */
+export interface MatPaginatorSelectConfig {
+ /** Whether to center the active option over the trigger. */
+ disableOptionCentering?: boolean;
+
+ /** Classes to be passed to the select panel. */
+ panelClass?: string|string[]|Set|{[key: string]: any};
+}
+
// Boilerplate for applying mixins to MatPaginator.
/** @docs-private */
class MatPaginatorBase {}
@@ -166,6 +176,9 @@ export class MatPaginator extends _MatPaginatorBase implements OnInit, OnDestroy
}
private _showFirstLastButtons = false;
+ /** Used to configure the underlying `MatSelect` inside the paginator. */
+ @Input() selectConfig: MatPaginatorSelectConfig = {};
+
/** Event emitted when the paginator changes the page size or page index. */
@Output() readonly page: EventEmitter = new EventEmitter();
diff --git a/tools/public_api_guard/material/paginator.d.ts b/tools/public_api_guard/material/paginator.d.ts
index 158777ef1fbd..b572600fe821 100644
--- a/tools/public_api_guard/material/paginator.d.ts
+++ b/tools/public_api_guard/material/paginator.d.ts
@@ -23,6 +23,7 @@ export declare class MatPaginator extends _MatPaginatorBase implements OnInit, O
set pageSize(value: number);
get pageSizeOptions(): number[];
set pageSizeOptions(value: number[]);
+ selectConfig: MatPaginatorSelectConfig;
get showFirstLastButtons(): boolean;
set showFirstLastButtons(value: boolean);
constructor(_intl: MatPaginatorIntl, _changeDetectorRef: ChangeDetectorRef, defaults?: MatPaginatorDefaultOptions);
@@ -44,7 +45,7 @@ export declare class MatPaginator extends _MatPaginatorBase implements OnInit, O
static ngAcceptInputType_pageIndex: NumberInput;
static ngAcceptInputType_pageSize: NumberInput;
static ngAcceptInputType_showFirstLastButtons: BooleanInput;
- static ɵcmp: i0.ɵɵComponentDefWithMeta;
+ static ɵcmp: i0.ɵɵComponentDefWithMeta;
static ɵfac: i0.ɵɵFactoryDef;
}
@@ -72,6 +73,13 @@ export declare class MatPaginatorModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta;
}
+export interface MatPaginatorSelectConfig {
+ disableOptionCentering?: boolean;
+ panelClass?: string | string[] | Set | {
+ [key: string]: any;
+ };
+}
+
export declare class PageEvent {
length: number;
pageIndex: number;