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;