createPagination(
props
?):PaginationWidget
Create a PaginationWidget with given config props
• props?: PropsConfig
<PaginationProps
>
a PaginationWidget
next:
string
The href for the 'Next' direction link
previous:
string
The href for the 'Previous' navigation link
getPaginationDefaultConfig():
PaginationProps
Retrieve a shallow copy of the default Pagination config
the default Pagination config
first(
event
?):void
To "go" to the first page
• event?: MouseEvent
void
last(
event
?):void
To "go" to the last page
• event?: MouseEvent
void
next(
event
?):void
To "go" to the next page
• event?: MouseEvent
void
previous(
event
?):void
To "go" to the previous page
• event?: MouseEvent
void
select(
page
,event
?):void
To "go" to a specific page
• page: number
The page number to select
• event?: MouseEvent
void
new PaginationComponent():
PaginationComponent
readonly
_widget:AngularWidget
<PaginationWidget
>
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, pageCount: 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
pageSize:
undefined
|number
The number of items per page.
min value is 1
10
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;
}
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
slotEllipsisFromContent:
undefined
|PaginationEllipsisDirective
slotFirstFromContent:
undefined
|PaginationFirstDirective
slotLastFromContent:
undefined
|PaginationLastDirective
slotNextFromContent:
undefined
|PaginationNextDirective
slotNumberLabelFromContent:
undefined
|PaginationNumberDirective
slotPagesFromContent:
undefined
|PaginationPagesDirective
slotPreviousFromContent:
undefined
|PaginationPreviousDirective
slotStructureFromContent:
undefined
|PaginationStructureDirective
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,
get
api():W
["api"
]
W
["api"
]
get
state():Signal
<WidgetState
<W
>>
Signal
<WidgetState
<W
>>
get
widget():ContextWidget
<W
>
ngAfterContentChecked():
void
A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
void
AfterContentChecked.ngAfterContentChecked
ngOnChanges(
changes
):void
• changes: SimpleChanges
void
ngOnInit():
void
void
PaginationContext:
WidgetSlotContext
<PaginationWidget
>
A type for the slot context of the pagination widget
const
paginationDefaultSlotPages:ComponentTemplate
<unknown
,"pages"
,PaginationDefaultSlotsComponent
>
The default slot for the pages
new PaginationDefaultSlotsComponent():
PaginationDefaultSlotsComponent
pages:
TemplateRef
<PaginationContext
>
structure:
TemplateRef
<PaginationContext
>
const
paginationDefaultSlotStructure:ComponentTemplate
<unknown
,"structure"
,PaginationDefaultSlotsComponent
>
The default slot for the structure
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
A directive to use to give the 'ellipsis' link template to the pagination component
new PaginationEllipsisDirective():
PaginationEllipsisDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(_dir
,context
):context is PaginationContext
• _dir: PaginationEllipsisDirective
• context: unknown
context is PaginationContext
A directive to use to give the 'first' link template to the pagination component
new PaginationFirstDirective():
PaginationFirstDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(_dir
,context
):context is PaginationContext
• _dir: PaginationFirstDirective
• context: unknown
context is PaginationContext
A directive to use to give the 'last' link template to the pagination component
new PaginationLastDirective():
PaginationLastDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(_dir
,context
):context is PaginationContext
• _dir: PaginationLastDirective
• context: unknown
context is PaginationContext
A directive to use to give the 'next' link template to the pagination component
new PaginationNextDirective():
PaginationNextDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(_dir
,context
):context is PaginationContext
• _dir: PaginationNextDirective
• context: unknown
context is PaginationContext
PaginationNumberContext:
PaginationContext
&object
A type for the slot context of the pagination widget when the slot is the number label
displayedPage:
number
Displayed page
A directive to use to give the page 'number' template to the pagination component
new PaginationNumberDirective():
PaginationNumberDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(_dir
,context
):context is PaginationNumberContext
• _dir: PaginationNumberDirective
• context: unknown
context is PaginationNumberContext
A directive to use to give the 'Pages' template for the Pages slot
new PaginationPagesDirective():
PaginationPagesDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(_dir
,context
):context is PaginationContext
• _dir: PaginationPagesDirective
• context: unknown
context is PaginationContext
A directive to use to give the 'previous' link template to the pagination component
new PaginationPreviousDirective():
PaginationPreviousDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(_dir
,context
):context is PaginationContext
• _dir: PaginationPreviousDirective
• context: unknown
context is PaginationContext
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, pageCount: 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
pageSize:
number
The number of items per page.
min value is 1
10
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;
}
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,
Directive to provide the slot structure for the pagination widget.
new PaginationStructureDirective():
PaginationStructureDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(dir
,context
):context is PaginationContext
• dir: PaginationStructureDirective
• context: unknown
context is PaginationContext
PaginationWidget:
Widget
<PaginationProps
,PaginationState
,PaginationApi
,PaginationActions
,PaginationDirectives
>