Paginator

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
NameDescription

changes: Subject<void>

Stream that emits whenever the labels here are changed. Use this to notify components if 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) => { if (length == 0 || pageSize == 0) { return `0 of ${length}`; } length = Math.max(length, 0); const startIndex = page * pageSize; const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize; return `${startIndex + 1} - ${endIndex} of ${length}`; }

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
NameDescription
@Input()

hidePageSize: boolean

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

@Input()

length: number

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

@Input()

pageIndex: number

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

@Input()

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()

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.

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
NameDescription

length: number

The current total number of items being paged

pageIndex: number

The current page index.

pageSize: number

The current page size
Contents