Components / Pager / API / PagerComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

PagerComponent

Selector

kendo-datapager

Export Name

Accessible in templates as #kendoPagerInstance="kendoDataPager"

Inputs

NameTypeDefaultDescription

buttonCount

number

Sets the maximum numeric buttons count before the buttons are collapsed.

info

boolean

Toggles the information about the current page and the total number of records.

navigable

boolean

false

If set to true, the user can use dedicated shortcuts to interact with the Pager (see example). By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.

pageSize

number

Defines the number of data items per page.

pageSizeValues

boolean | undefined[]

Shows a dropdown for selecting the page size. When set to true, the dropdown will contain the default list of options - 5, 10, 20. To customize the list of options, set pageSizeValues to an array of the desired values. The array can contain numbers and PageSizeItem objects.

previousNext

boolean

Toggles the Previous and Next buttons.

size

PagerSize

Specifies the padding of all Pager elements.

The possible values are:

  • small
  • medium (default)
  • large
  • none

skip

number

Defines the number of data items to be skipped.

total

number

Represents the total number of data items in the collection.

type

PagerType

Defines the type of the pager.

Events

NameTypeDescription

pageChange

EventEmitter<PageChangeEvent>

Fires when the current page of the Pager is changed (see example). You have to handle the event yourself and page the data.

pageSizeChange

EventEmitter<PageSizeChangeEvent>

Fires when the page size of the Pager is changed. You have to handle the event yourself and page the data. If the event is prevented, the page size will remain unchanged (see example).

In this article

Not finding the help you need?

Contact Support