API reference for Angular Material paginator
import {MatPaginatorModule} from '@angular/material/paginator';
Services
MatPaginatorIntl
To modify the labels and text displayed, create a new instance of MatPaginatorIntl and include it in a custom provider
Properties
Name | Description |
---|---|
|
Stream to emit from when labels are changed. Use this to notify components when the labels have changed after initialization. |
|
A label for the button that moves to the first page. |
|
A label for the range of items within the current page and the length of the whole list. |
|
A label for the page size selector. |
|
A label for the button that moves to the last page. |
|
A label for the button that increments the current page. |
|
A label for the button that decrements the current page. |
Directives
MatPaginator
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: matPaginatorProperties
Name | Description |
---|---|
@Input()
|
Theme color of the underlying form controls. This API is supported in M2 themes only,it has no effect in M3 themes. For information on applying color variants in M3, see https://material.angular.io/guide/theming#using-component-color-variants. |
@Input({ transform: booleanAttribute })
|
Whether the paginator is disabled. |
@Input({ transform: booleanAttribute })
|
Whether to hide the page size selection UI from the user. |
@Input({ transform: numberAttribute })
|
The length of the total number of items that are being paginated. Defaulted to 0. |
@Input({ transform: numberAttribute })
|
The zero-based page index of the displayed list of items. Defaulted to 0. |
@Input({ transform: numberAttribute })
|
Number of items to display on a page. By default set to 50. |
@Input()
|
The set of provided page size options to display to the user. |
@Input()
|
Used to configure the underlying |
@Input({ transform: booleanAttribute })
|
Whether to show the first/last buttons UI to the user. |
@Output()
|
Event emitted when the paginator changes the page size or page index. |
|
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. |
Classes
PageEvent
Change event object that is emitted when the user selects a different page size or navigates to another page.
Properties
Name | Description |
---|---|
|
The current total number of items being paged. |
|
The current page index. |
|
The current page size. |
|
Index of the page that was selected previously. |
Interfaces
MatPaginatorSelectConfig
Object that can used to configure the underlying MatSelect
inside a MatPaginator
.
Properties
Name | Description |
---|---|
|
Whether to center the active option over the trigger. |
|
Classes to be passed to the select panel. |
MatPaginatorDefaultOptions
Object that can be used to configure the default options for the paginator module.
Properties
Name | Description |
---|---|
|
The default form-field appearance to apply to the page size options selector. |
|
Whether to hide the page size selection UI from the user. |
|
Number of items to display on a page. By default set to 50. |
|
The set of provided page size options to display to the user. |
|
Whether to show the first/last buttons UI to the user. |
Constants
MAT_PAGINATOR_DEFAULT_OPTIONS
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';
Classes
MatPaginatorHarness
extends
ComponentHarness
Harness for interacting with a mat-paginator in tests.
Properties
Name | Description |
---|---|
|
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 |
|
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 |
|
Parameters | |
options PaginatorHarnessFilters = {}
|
Options for filtering which paginator instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
PaginatorHarnessFilters
A set of criteria that can be used to filter a list of MatPaginatorHarness
instances.