Skip to content

Commit

Permalink
feat(paginator): add input for configuring the underlying select
Browse files Browse the repository at this point in the history
Since we hide the underlying `MatSelect` inside the `MatPaginator`, the user doesn't have the ability to configure some of the inputs. These changes introduce an input that proxy some of the supported properties to the select.

Fixes #13646.
  • Loading branch information
crisbeto committed Mar 8, 2020
1 parent e0634c9 commit 5458aee
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 6 deletions.
5 changes: 4 additions & 1 deletion src/material/paginator/paginator.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,12 @@
<mat-select
[value]="pageSize"
[disabled]="disabled"
[panelClass]="selectConfig.panelClass"
[disableOptionCentering]="selectConfig.disableOptionCentering"
[aria-label]="_intl.itemsPerPageLabel"
(selectionChange)="_changePageSize($event.value)">
<mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions" [value]="pageSizeOption">
<mat-option *ngFor="let pageSizeOption of _displayedPageSizeOptions"
[value]="pageSizeOption">
{{pageSizeOption}}
</mat-option>
</mat-select>
Expand Down
9 changes: 7 additions & 2 deletions src/material/paginator/paginator.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand All @@ -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`.
30 changes: 28 additions & 2 deletions src/material/paginator/paginator.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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<MatPaginatorApp>;
let component: MatPaginatorApp;
Expand Down Expand Up @@ -488,6 +512,7 @@ function getLastButton(fixture: ComponentFixture<any>) {
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
[hidePageSize]="hidePageSize"
[selectConfig]="selectConfig"
[showFirstLastButtons]="showFirstLastButtons"
[length]="length"
[color]="color"
Expand All @@ -506,6 +531,7 @@ class MatPaginatorApp {
disabled: boolean;
pageEvent = jasmine.createSpy('page event');
color: ThemePalette;
selectConfig: MatPaginatorSelectConfig = {};

@ViewChild(MatPaginator) paginator: MatPaginator;

Expand Down
13 changes: 13 additions & 0 deletions src/material/paginator/paginator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,16 @@ export interface MatPaginatorDefaultOptions {
export const MAT_PAGINATOR_DEFAULT_OPTIONS =
new InjectionToken<MatPaginatorDefaultOptions>('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<string>|{[key: string]: any};
}

// Boilerplate for applying mixins to MatPaginator.
/** @docs-private */
class MatPaginatorBase {}
Expand Down Expand Up @@ -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<PageEvent> = new EventEmitter<PageEvent>();

Expand Down
10 changes: 9 additions & 1 deletion tools/public_api_guard/material/paginator.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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<MatPaginator, "mat-paginator", ["matPaginator"], { "disabled": "disabled"; "color": "color"; "pageIndex": "pageIndex"; "length": "length"; "pageSize": "pageSize"; "pageSizeOptions": "pageSizeOptions"; "hidePageSize": "hidePageSize"; "showFirstLastButtons": "showFirstLastButtons"; }, { "page": "page"; }, never>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MatPaginator, "mat-paginator", ["matPaginator"], { "disabled": "disabled"; "color": "color"; "pageIndex": "pageIndex"; "length": "length"; "pageSize": "pageSize"; "pageSizeOptions": "pageSizeOptions"; "hidePageSize": "hidePageSize"; "showFirstLastButtons": "showFirstLastButtons"; "selectConfig": "selectConfig"; }, { "page": "page"; }, never>;
static ɵfac: i0.ɵɵFactoryDef<MatPaginator>;
}

Expand Down Expand Up @@ -72,6 +73,13 @@ export declare class MatPaginatorModule {
static ɵmod: i0.ɵɵNgModuleDefWithMeta<MatPaginatorModule, [typeof i1.MatPaginator], [typeof i2.CommonModule, typeof i3.MatButtonModule, typeof i4.MatSelectModule, typeof i5.MatTooltipModule], [typeof i1.MatPaginator]>;
}

export interface MatPaginatorSelectConfig {
disableOptionCentering?: boolean;
panelClass?: string | string[] | Set<string> | {
[key: string]: any;
};
}

export declare class PageEvent {
length: number;
pageIndex: number;
Expand Down

0 comments on commit 5458aee

Please sign in to comment.