@anguless/angulux/paginator

paginator

1 declarations2 demos

import

import { PaginatorModule } from '@anguless/angulux/paginator';

Basic

Paginator reports the page it moved to; the caller owns first and rows.

Showing from 0, 10 per page

<div style="width: 100%">    <agl-paginator [first]="first()" [rows]="rows()" [totalRecords]="120" (onPageChange)="onPage($event)" />    <p style="text-align: center">Showing from {{ first() }}, {{ rows() }} per page</p></div>

Rows per page

rowsPerPageOptions adds the control that changes the page size.

<div style="width: 100%">    <agl-paginator [first]="first()" [rows]="rows()" [totalRecords]="120" [rowsPerPageOptions]="[10, 20, 30]" (onPageChange)="onPage($event)" /></div>

API

Generated from the committed corpus, which check:corpus holds to the built library.

Paginator

componentagl-paginator

Paginator is a generic component to display content in paged format.

Input	Type	Default	Description
pageLinkSize	number	not documented	Number of page links to display.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the component.
alwaysShow	boolean	not documented	Whether to show it even there is only one page.
dropdownAppendTo deprecated — since v20.0.0. Use `appendTo` instead.	HTMLElement \| ElementRef \| TemplateRef<any> \| string \| null \| undefined \| any	not documented	Target element to attach the dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
templateLeft	TemplateRef<PaginatorTemplateContext> \| undefined	not documented	Template instance to inject into the left side of the paginator.
templateRight	TemplateRef<PaginatorTemplateContext> \| undefined	not documented	Template instance to inject into the right side of the paginator.
dropdownScrollHeight	string	not documented	Dropdown height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
currentPageReportTemplate	string	not documented	Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
showCurrentPageReport	boolean \| undefined	not documented	Whether to display current page report.
showFirstLastIcon	boolean	not documented	When enabled, icons are displayed on paginator to go first and last page.
totalRecords	number	not documented	Number of total records.
rows	number	not documented	Data count to display per page.
rowsPerPageOptions	any[] \| undefined	not documented	Array of integer/object values to display inside rows per page dropdown. A object that have 'showAll' key can be added to it to show all data. Exp; [10,20,30,{showAll:'All'}]
showJumpToPageDropdown	boolean \| undefined	not documented	Whether to display a dropdown to navigate to any page.
showJumpToPageInput	boolean \| undefined	not documented	Whether to display a input to navigate to any page.
jumpToPageItemTemplate	TemplateRef<PaginatorDropdownItemTemplateContext> \| undefined	not documented	Template instance to inject into the jump to page dropdown item inside in the paginator.
showPageLinks	boolean	not documented	Whether to show page links.
locale	string \| undefined	not documented	Locale to be used in formatting.
dropdownItemTemplate	TemplateRef<PaginatorDropdownItemTemplateContext> \| undefined	not documented	Template instance to inject into the rows per page dropdown item inside in the paginator.
first	number	not documented	Zero-relative number of the first row to be displayed.
appendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| 'self' \| 'body' \| null \| undefined \| any	'self'	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).

Output	Type	Description
onPageChange	EventEmitter<PaginatorState>	Callback to invoke when page changes, the event object contains information about the new state.

Template slot	Description
<ng-template #dropdownicon>	Template for the dropdown icon.
<ng-template #firstpagelinkicon>	Template for the first page link icon.
<ng-template #previouspagelinkicon>	Template for the previous page link icon.
<ng-template #lastpagelinkicon>	Template for the last page link icon.
<ng-template #nextpagelinkicon>	Template for the next page link icon.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.