@talenra/components documentation
  1. Components
  2. PaginatorComponent

File

paginator/src/paginator/paginator.component.ts

Description

Paginator component provides pagination control to navigate through a list of items.

Example :
<!-- Basic usage -->
<talenra-paginator [state]="paginatorState" (stateChange)="onPaginatorStateChange($event)" />

<!-- With options -->
<talenra-paginator
  [state]="paginatorState"
  (stateChange)="onPaginatorStateChange($event)"
  showMoveFirstLastButtons
  disableItemsPerPageSelection />

Implements

OnInit OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-paginator
imports ButtonComponent OptionComponent SelectComponent ReactiveFormsModule FormsModule
templateUrl ./paginator.component.html
styleUrl ./paginator.component.scss

Index

Inputs
Outputs

Inputs

align
Type : TPaginatorAlignment
Default value : PaginatorAlignment.Left

Alignment of the paginator. Paginator will take the full width (100%) of the container element. The align property is used to control the Paginator's alignment.

Example :
<talenra-paginator ... align="right" />
customMessages
Type : IPaginatorMessages | undefined
Default value : undefined

Custom messages/translations will override default messages provided via localize. Use this feature if your app involves multiple instances of Paginator using different messages per instance. If all Paginator instances of your app share the same messages, you should provide/customize messages via localization instead.

Note that custom messages can be translated using the $localize tag function (cmp. example below).

Example :
protected customMessages: IPaginatorMessages = {
  of: signal<string>($localize`:Paginator showcase|Custom message "of":/`),
  itemsPerPage: signal<string>($localize`:Paginator showcase|Custom message "items per page":cards per set`),
};
Example :
<talenra-paginator ... [customMessages]="customMessages" showItemsPerPage />
hideItemsPerPage
Default value : false, { transform: booleanAttribute }

Determines whether the selection of items per page is hidden.

Example :
<talenra-paginator hideItemsPerPage />
showFirstLastButtons
Default value : false, { transform: booleanAttribute }

Determines whether the buttons to move to first/last page are shown.

Example :
<talenra-paginator showFirstLastButtons />
state
Type : PaginatorState
Default value : { currentPage: 1, itemsPerPage: ITEMS_PER_PAGE_DEFAULT, totalItems: 1, itemsPerPageOptions: ITEMS_PER_PAGE_OPTIONS_DEFAULT, }

The state of the paginator. Provides information about the current page, the number of items per page etc. Supports two-way binding.

Example :
<talenra-paginator [(state)]="paginatorState" />

Outputs

state
Type : PaginatorState

The state of the paginator. Provides information about the current page, the number of items per page etc. Supports two-way binding.

Example :
<talenra-paginator [(state)]="paginatorState" />

results matching ""

    No results matching ""