API for paginator

API reference for Angular Material paginator

import {MatPaginatorModule} from '@angular/material/paginator';

To modify the labels and text displayed, create a new instance of MatPaginatorIntl and include it in a custom provider

Properties
Name Description

changes: Subject<void>

Stream to emit from when labels are changed. Use this to notify components when the labels have changed after initialization.

firstPageLabel: string

A label for the button that moves to the first page.

getRangeLabel: (page: number, pageSize: number, length: number) => string

A label for the range of items within the current page and the length of the whole list.

itemsPerPageLabel: string

A label for the page size selector.

lastPageLabel: string

A label for the button that moves to the last page.

nextPageLabel: string

A label for the button that increments the current page.

previousPageLabel: string

A label for the button that decrements the current page.

Component to provide navigation between paged information. Displays the size of the current page, user-selectable options to change that size, what items are being shown, and navigational button to go to the previous or next page.

Selector: mat-paginator

Exported as: matPaginator
Properties
Name Description
@Input()

color: ThemePalette

Theme color of the underlying form controls. This API is supported in M2 themes only,it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/paginator/styling.

For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

@Input({ transform: booleanAttribute })

disabled: boolean

Whether the paginator is disabled.

@Input({ transform: booleanAttribute })

hidePageSize: boolean

Whether to hide the page size selection UI from the user.

@Input({ transform: numberAttribute })

length: number

The length of the total number of items that are being paginated. Defaulted to 0.

@Input({ transform: numberAttribute })

pageIndex: number

The zero-based page index of the displayed list of items. Defaulted to 0.

@Input({ transform: numberAttribute })

pageSize: number

Number of items to display on a page. By default set to 50.

@Input()

pageSizeOptions: number[]

The set of provided page size options to display to the user.

@Input()

selectConfig: MatPaginatorSelectConfig

Used to configure the underlying MatSelect inside the paginator.

@Input({ transform: booleanAttribute })

showFirstLastButtons: boolean

Whether to show the first/last buttons UI to the user.

@Output()

page: EventEmitter<PageEvent>

Event emitted when the paginator changes the page size or page index.

initialized: Observable<void>

Emits when the paginator is initialized.

Methods
firstPage

Move to the first page if not already there.

getNumberOfPages

Calculate the number of pages

Returns
number

hasNextPage

Whether there is a next page.

Returns
boolean

hasPreviousPage

Whether there is a previous page.

Returns
boolean

lastPage

Move to the last page if not already there.

nextPage

Advances to the next page if it exists.

previousPage

Move back to the previous page if it exists.

Change event object that is emitted when the user selects a different page size or navigates to another page.

Properties
Name Description

length: number

The current total number of items being paged.

pageIndex: number

The current page index.

pageSize: number

The current page size.

previousPageIndex: number

Index of the page that was selected previously.

Object that can used to configure the underlying MatSelect inside a MatPaginator.

Properties
Name Description

disableOptionCentering: boolean

Whether to center the active option over the trigger.

panelClass: string | string[] | Set<string> | { [key: string]: any; }

Classes to be passed to the select panel.

Object that can be used to configure the default options for the paginator module.

Properties
Name Description

formFieldAppearance: MatFormFieldAppearance

The default form-field appearance to apply to the page size options selector.

hidePageSize: boolean

Whether to hide the page size selection UI from the user.

pageSize: number

Number of items to display on a page. By default set to 50.

pageSizeOptions: number[]

The set of provided page size options to display to the user.

showFirstLastButtons: boolean

Whether to show the first/last buttons UI to the user.

Injection token that can be used to provide the default options for the paginator module.

const MAT_PAGINATOR_DEFAULT_OPTIONS: InjectionToken<MatPaginatorDefaultOptions>;

API reference for Angular Material paginator-testing

import {MatPaginatorHarness} from '@angular/material/paginator/testing';

Harness for interacting with a mat-paginator in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-paginator'

Selector used to find paginator instances.

Methods
async
getPageSize

Gets the page size of the paginator.

Returns
Promise<number>

async
getRangeLabel

Gets the text of the range label of the paginator.

Returns
Promise<string>

async
goToFirstPage

Goes to the first page in the paginator.

Returns
Promise<void>

Promise that resolves when the action completes.

async
goToLastPage

Goes to the last page in the paginator.

Returns
Promise<void>

Promise that resolves when the action completes.

async
goToNextPage

Goes to the next page in the paginator.

Returns
Promise<void>

Promise that resolves when the action completes.

async
goToPreviousPage

Goes to the previous page in the paginator.

Returns
Promise<void>

Promise that resolves when the action completes.

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isNextPageDisabled

Returns whether or not the next page button is disabled.

Returns
Promise<boolean>

async
isPreviousPageDisabled
Returns
Promise<boolean>

async
setPageSize

Sets the page size of the paginator.

Parameters

size

number

Page size that should be select.

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for a paginator with specific attributes.

Parameters

options

PaginatorHarnessFilters = {}

Options for filtering which paginator instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatPaginatorHarness instances.

Azure & Blue theme selected.