Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Paginator

Paginator controls pages of a dataset: tables, DataView screens, search results, record lists, and server-side browsing.

Use length for the total number of records, pageSize for records per page, pageIndex for the current zero-based page, and the page event to update local data or request the next page from an API.

Do not use Paginator for app route navigation, wizard steps, carousel slides, media browsing, or standalone UI without a paged dataset.

The NgStarter Angular Paginator component lets you control pages of a dataset with range label, previous/next navigation, optional first/last buttons, and page size selection. Use ngs-paginator next to paged tables, DataView screens, search results, record lists, and server-side browsing. It includes examples for Basic Paginator, and Configurable Paginator.

Basic Paginator

Use a basic paginator beside paged records when length, page size, and page index are known.

Items per page:
1 – 10 of 100

Configurable Paginator

Configure page size options, first and last buttons, disabled state, and page events when the screen owns paging state.

Items per page:
1 – 10 of 50
Output event: No events dispatched yet
Number Of Pages: 5