eui documentation
  1. Components
  2. EclPaginationComponent

File

packages/ecl/components/ecl-pagination/ecl-pagination.component.ts

Description

Component rendering the ECL pagination. Supports manual and automatic modes. Emits page change events and manages pagination logic.

Extends

ECLBaseDirective

Implements

OnInit OnChanges

Metadata

selector ecl-pagination
imports NgTemplateOutlet EclPaginationItemComponent
styles :host { display: block; }
templateUrl ./ecl-pagination.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

currentPage
Type : number
Default value : DefaultConfig.currentPage

Currently selected page number.
mode
Type : "manual" | "auto"
Default value : 'manual'

Defines the pagination mode.

  • manual - component waits for external events to change pages.
  • auto - component manages the pages automatically based on inputs.
pageSize
Type : number
Default value : DefaultConfig.pageSize

Number of items displayed on a single page.
pageWindowSize
Type : number
Default value : DefaultConfig.pageWindowSize

Number of pagination links visible around the current page.
totalItems
Type : number
Default value : DefaultConfig.totalItems

Total number of items in the list.
class
Type : string
e2eAttr
Type : any
tabindex
Type : number

Outputs

page
Type : EventEmitter

Emits a pagination event each time the page changes.

HostBindings

attr.role
Type : string
Default value : 'navigation'

Sets the ARIA role to indicate navigation.
class.ecl-pagination
Type : boolean
Default value : true

Adds the ecl-pagination class to the host element.

Methods

isModeAuto
isModeAuto()

Checks if the component is in automatic mode.

Returns : boolean
onNextPage
onNextPage()

Navigates to the next page and emits a page change event.

Returns : void
onPage
onPage(page: number)

Navigates to a specific page and emits a page change event.

Parameters :
Name Type Optional Description
page number No

The page number to navigate to.
Returns : void
onPreviousPage
onPreviousPage()

Navigates to the previous page and emits a page change event.

Returns : void
getCssClasses
getCssClasses(rootClass: string)
Parameters :
Name Type Optional
rootClass string No
Returns : string

Properties

cmpClass
Type : unknown
Default value : true
Decorators :
@HostBinding('class.ecl-pagination')

Adds the ecl-pagination class to the host element.
eclPaginationList
Type : EclPaginationListDirective
Decorators :
@ContentChild(EclPaginationListDirective)

Reference to the pagination list directive inside the component's content.
Public model
Type : unknown
Default value : EuiPagination.create()

Internal pagination model storing pagination data and logic.
role
Type : string
Default value : 'navigation'
Decorators :
@HostBinding('attr.role')

Sets the ARIA role to indicate navigation.

Accessors

hasList
gethasList()

Returns true if the pagination list exists in the template.

Returns : boolean

results matching ""

    No results matching ""