Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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