Pagination

• props?: PropsConfig<PaginationProps>

PaginationWidget

a PaginationWidget

next: string

The href for the 'Next' direction link

previous: string

The href for the 'Previous' navigation link

PaginationProps

the default Pagination config

first(): void

To "go" to the first page

void

last(): void

To "go" to the last page

void

next(): void

To "go" to the next page

void

previous(): void

To "go" to the previous page

void

select(page): void

To "go" to a specific page

• page: number

The page number to select

void

activeLabel: undefined | string

The label for the "active" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'(current)'

ariaEllipsisLabel: undefined | string

The label for the "Ellipsis" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Ellipsis page element'

ariaFirstLabel: undefined | string

The label for the "First" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for first page'

ariaLabel: undefined | string

The label for the nav element.

for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Page navigation'

ariaLastLabel: undefined | string

The label for the "Last" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for last page'

ariaLiveLabel: undefined | (currentPage, pageCount) => string

Provide the label for the aria-live element This is used for accessibility purposes. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

The current page number

The total number of pages

(currentPage: number) => `Current page is ${currentPage}`

ariaNextLabel: undefined | string

The label for the "Next" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for next page'

ariaPageLabel: undefined | (processPage, pageCount) => string

Provide the label for each "Page" page button. This is used for accessibility purposes. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

The current page number

The total number of pages

(processPage: number, pageCount: number) => `Page ${processPage} of ${pageCount}`

ariaPreviousLabel: undefined | string

The label for the "Previous" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for previous page'

boundaryLinks: undefined | boolean

If true, the "First" and "Last" page links are shown.

false

className: undefined | string

CSS classes to be applied on the widget main container

''

collectionSize: undefined | number

The number of items in your paginated collection.

Note, that this is not the number of pages. Page numbers are calculated dynamically based on collectionSize and pageSize.

Ex. if you have 100 items in your collection and displaying 20 items per page, you'll end up with 5 pages.

Whatever the collectionSize the page number is of minimum 1.

0

directionLinks: undefined | boolean

If true, the "Next" and "Previous" page links are shown.

true

disabled: undefined | boolean

If true, pagination links will be disabled.

false

ellipsisLabel: SlotContent<PaginationContext>

The template to use for the ellipsis slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'…'

firstPageLabel: SlotContent<PaginationContext>

The template to use for the first slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'«'

lastPageLabel: SlotContent<PaginationContext>

The template to use for the last slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'»'

nextPageLabel: SlotContent<PaginationContext>

The template to use for the next slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'›'

numberLabel: SlotContent<PaginationNumberContext>

The template to use for the number slot override any configuration parameters provided for this for I18n, we suggest to use the global configuration

The current page number

({displayedPage}: PaginationNumberContext) => `${displayedPage}`

page: undefined | number

The current page.

Page numbers start with 1.

1

pageChange: EventEmitter<number>

An event fired when the page is changed.

Event payload is the number of the newly selected page.

Page numbers start with 1.

() => {}

pageLink: undefined | (pageNumber) => string

Factory function providing the href for a "Page" page anchor, based on the current page number

The index to use in the link

(_page: number) => PAGE_LINK_DEFAULT

pagesDisplay: SlotContent<PaginationContext>

The template to use for the pages slot To use to customize the pages view override any configuration parameters provided for this

pagesFactory: undefined | (page, pageCount) => number[]

pagesFactory returns a function computing the array of pages to be displayed as number (-1 are treated as ellipsis). Use Page slot to customize the pages view and not this

The current page number

The total number of pages

(_page: number, pageCount: number) => {
		const pages: number[] = [];
		for (let i = 1; i <= pageCount; i++) {
			pages.push(i);
		}
		return pages;
	}

pageSize: undefined | number

The number of items per page.

min value is 1

10

previousPageLabel: SlotContent<PaginationContext>

The template to use for the previous slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'‹'

size: undefined | null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

null

structure: SlotContent<PaginationContext>

The template to use for the structure of the pagination component The default structure uses PaginationProps.ellipsisLabel|ellipsisLabel, PaginationProps.firstPageLabel|firstPageLabel, PaginationProps.previousPageLabel|previousPageLabel, PaginationProps.nextPageLabel|nextPageLabel, PaginationProps.lastPageLabel|lastPageLabel, PaginationProps.pagesDisplay|pagesDisplay, PaginationProps.numberLabel|numberLabel,

get api(): W["api"]

Retrieves the widget api

W["api"]

the widget api

get directives(): W["directives"]

Retrieves the widget directives

W["directives"]

the widget directives

get state(): AngularState<W>

Retrieves the widget state as an Angular Signal

AngularState<W>

the widget state

• PaginationNumberContext

api: PaginationApi

all the api functions to interact with the widget

directives: PaginationDirectives

directives to be used on html elements in the template of the widget or in the slots

state: AngularState<PaginationWidget>

the state of the widget

pageFirst: Directive

A directive to be applied on the first link

pageLast: Directive

A directive to be applied on the Last link

pageLink: Directive<object>

A directive to be applied to each page link This will handle the click, tabindex and aria attributes

page: number

pageNext: Directive

A directive to be applied on the next link

pagePrev: Directive

A directive to be applied on the previous link

api: PaginationApi

all the api functions to interact with the widget

directives: PaginationDirectives

directives to be used on html elements in the template of the widget or in the slots

displayedPage: number

Displayed page

state: AngularState<PaginationWidget>

the state of the widget

activeLabel: string

The label for the "active" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'(current)'

ariaEllipsisLabel: string

The label for the "Ellipsis" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Ellipsis page element'

ariaFirstLabel: string

The label for the "First" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for first page'

ariaLabel: string

The label for the nav element.

for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Page navigation'

ariaLastLabel: string

The label for the "Last" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for last page'

ariaLiveLabel: (currentPage, pageCount) => string

Provide the label for the aria-live element This is used for accessibility purposes. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

• currentPage: number

The current page number

• pageCount: number

The total number of pages

string

(currentPage: number) => `Current page is ${currentPage}`

ariaNextLabel: string

The label for the "Next" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for next page'

ariaPageLabel: (processPage, pageCount) => string

Provide the label for each "Page" page button. This is used for accessibility purposes. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

• processPage: number

The current page number

• pageCount: number

The total number of pages

string

(processPage: number, pageCount: number) => `Page ${processPage} of ${pageCount}`

ariaPreviousLabel: string

The label for the "Previous" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for previous page'

boundaryLinks: boolean

If true, the "First" and "Last" page links are shown.

false

className: string

CSS classes to be applied on the widget main container

''

collectionSize: number

The number of items in your paginated collection.

Note, that this is not the number of pages. Page numbers are calculated dynamically based on collectionSize and pageSize.

Ex. if you have 100 items in your collection and displaying 20 items per page, you'll end up with 5 pages.

Whatever the collectionSize the page number is of minimum 1.

0

directionLinks: boolean

If true, the "Next" and "Previous" page links are shown.

true

disabled: boolean

If true, pagination links will be disabled.

false

ellipsisLabel: SlotContent<PaginationContext>

The template to use for the ellipsis slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'…'

firstPageLabel: SlotContent<PaginationContext>

The template to use for the first slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'«'

lastPageLabel: SlotContent<PaginationContext>

The template to use for the last slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'»'

nextPageLabel: SlotContent<PaginationContext>

The template to use for the next slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'›'

numberLabel: SlotContent<PaginationNumberContext>

The template to use for the number slot override any configuration parameters provided for this for I18n, we suggest to use the global configuration

The current page number

({displayedPage}: PaginationNumberContext) => `${displayedPage}`

onPageChange: (page) => void

An event fired when the page is changed.

Event payload is the number of the newly selected page.

Page numbers start with 1.

• page: number

void

() => {}

page: number

The current page.

Page numbers start with 1.

1

pageLink: (pageNumber) => string

Factory function providing the href for a "Page" page anchor, based on the current page number

• pageNumber: number

The index to use in the link

string

(_page: number) => PAGE_LINK_DEFAULT

pagesDisplay: SlotContent<PaginationContext>

The template to use for the pages slot To use to customize the pages view override any configuration parameters provided for this

pagesFactory: (page, pageCount) => number[]

pagesFactory returns a function computing the array of pages to be displayed as number (-1 are treated as ellipsis). Use Page slot to customize the pages view and not this

• page: number

The current page number

• pageCount: number

The total number of pages

number[]

(_page: number, pageCount: number) => {
		const pages: number[] = [];
		for (let i = 1; i <= pageCount; i++) {
			pages.push(i);
		}
		return pages;
	}

pageSize: number

The number of items per page.

min value is 1

10

previousPageLabel: SlotContent<PaginationContext>

The template to use for the previous slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'‹'

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

null

structure: SlotContent<PaginationContext>

The template to use for the structure of the pagination component The default structure uses ellipsisLabel, firstPageLabel, previousPageLabel, nextPageLabel, lastPageLabel, pagesDisplay, numberLabel,

activeLabel: string

The label for the "active" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'(current)'

ariaEllipsisLabel: string

The label for the "Ellipsis" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Ellipsis page element'

ariaFirstLabel: string

The label for the "First" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for first page'

ariaLabel: string

The label for the nav element.

for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Page navigation'

ariaLastLabel: string

The label for the "Last" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for last page'

ariaLiveLabelText: string

The aria-live text

ariaNextLabel: string

The label for the "Next" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for next page'

ariaPreviousLabel: string

The label for the "Previous" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for previous page'

boundaryLinks: boolean

If true, the "First" and "Last" page links are shown.

false

className: string

CSS classes to be applied on the widget main container

''

directionLinks: boolean

If true, the "Next" and "Previous" page links are shown.

true

directionsHrefs: DirectionsHrefs

The hrefs for the direction links

disabled: boolean

If true, pagination links will be disabled.

false

ellipsisLabel: SlotContent<PaginationContext>

The template to use for the ellipsis slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'…'

firstPageLabel: SlotContent<PaginationContext>

The template to use for the first slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'«'

lastPageLabel: SlotContent<PaginationContext>

The template to use for the last slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'»'

nextDisabled: boolean

true if the next link need to be disabled

nextPageLabel: SlotContent<PaginationContext>

The template to use for the next slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'›'

numberLabel: SlotContent<PaginationNumberContext>

The template to use for the number slot override any configuration parameters provided for this for I18n, we suggest to use the global configuration

The current page number

({displayedPage}: PaginationNumberContext) => `${displayedPage}`

page: number

The current page.

Page numbers start with 1.

1

pageCount: number

The number of pages.

pages: number[]

The current pages, the number in the Array is the number of the page.

pagesDisplay: SlotContent<PaginationContext>

The template to use for the pages slot To use to customize the pages view override any configuration parameters provided for this

pagesHrefs: string[]

The hrefs for each "Page" page link

pagesLabel: string[]

The label for each "Page" page link.

previousDisabled: boolean

true if the previous link need to be disabled

previousPageLabel: SlotContent<PaginationContext>

The template to use for the previous slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'‹'

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

null

structure: SlotContent<PaginationContext>

The template to use for the structure of the pagination component The default structure uses ellipsisLabel, firstPageLabel, previousPageLabel, nextPageLabel, lastPageLabel, pagesDisplay, numberLabel,