<igx-paginator (pageChange)="onPageChange($event)"></igx-paginator>
public onPageChange(page: number) {
this.currentPage = page;
}
Emitted before paging is performed.
Returns an object consisting of the current and next pages.
<igx-paginator (paging)="pagingHandler($event)"></igx-paginator>
Emitted after paging is performed.
Returns an object consisting of the previous and current pages.
<igx-paginator (pagingDone)="pagingDone($event)"></igx-paginator>
Emitted when perPage
property value of the paginator is changed.
<igx-paginator (perPageChange)="onPerPageChange($event)"></igx-paginator>
public onPerPageChange(perPage: number) {
this.perPage = perPage;
}
Total pages calculated from totalRecords and perPage
Returns the theme of the component.
The default theme is comfortable
.
Available options are comfortable
, cosy
, compact
.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Returns if the current page is the first page.
const lastPage = this.paginator.isFirstPage;
Returns if the first pager buttons should be disabled
Returns if the current page is the last page.
const lastPage = this.paginator.isLastPage;
Returns if the last pager buttons should be disabled
Sets custom OverlaySettings.
<igx-paginator [overlaySettings] = "customOverlaySettings"></igx-paginator>
Gets/Sets the current page of the paginator. The default is 0.
let page = this.paginator.page;
IgxPaginatorComponent
Gets/Sets the number of visible items per page in the paginator. The default is 15.
let itemsPerPage = this.paginator.perPage;
IgxPaginatorComponent
An accessor that returns the resource strings.
An accessor that sets the resource strings. By default it uses EN resources.
Sets custom options in the select of the paginator
let options = this.paginator.selectOptions;
IgxPaginatorComponent
Sets the total records.
let totalRecords = this.paginator.totalRecords;
IgxPaginatorComponent
Sets the --component-size
CSS variable based on the value of Display Density
Emitted after the current page is changed.