• Version 5.1.1
  • Published
  • 115 kB
  • No dependencies
  • MIT license


npm i ngx-pagination
yarn add ngx-pagination
pnpm add ngx-pagination


Pagination for Angular



variable ɵa

const ɵa: string;
  • The default template and styles for the pagination links are borrowed directly from Zurb Foundation 6:

variable ɵb

const ɵb: string;


    class NgxPaginationModule

    class NgxPaginationModule {}

      class PaginatePipe

      class PaginatePipe {}


        constructor(service: PaginationService);

          method transform

          transform: <T, U extends Collection<T>>(
          collection: U,
          args: PaginatePipeArgs
          ) => U;

            class PaginationControlsComponent

            class PaginationControlsComponent {}
            • The default pagination controls component. Actually just a default implementation of a custom template.

            property autoHide

            autoHide: boolean;
              directionLinks: boolean;

                property id

                id: string;

                  property maxSize

                  maxSize: number;

                    property nextLabel

                    nextLabel: string;

                      property pageBoundsCorrection

                      pageBoundsCorrection: EventEmitter<number>;

                        property pageChange

                        pageChange: EventEmitter<number>;

                          property previousLabel

                          previousLabel: string;

                            property responsive

                            responsive: boolean;

                              property screenReaderCurrentLabel

                              screenReaderCurrentLabel: string;

                                property screenReaderPageLabel

                                screenReaderPageLabel: string;

                                  property screenReaderPaginationLabel

                                  screenReaderPaginationLabel: string;

                                    method trackByIndex

                                    trackByIndex: (index: number) => number;

                                      class PaginationControlsDirective

                                      class PaginationControlsDirective {}
                                      • This directive is what powers all pagination controls components, including the default one. It exposes an API which is hooked up to the PaginationService to keep the PaginatePipe in sync with the pagination controls.


                                      constructor(service: PaginationService, changeDetectorRef: ChangeDetectorRef);

                                        property id

                                        id: string;

                                          property maxSize

                                          maxSize: number;

                                            property pageBoundsCorrection

                                            pageBoundsCorrection: EventEmitter<number>;

                                              property pageChange

                                              pageChange: EventEmitter<number>;

                                                property pages

                                                pages: Page[];

                                                  method getCurrent

                                                  getCurrent: () => number;
                                                  • Get the current page number.

                                                  method getLastPage

                                                  getLastPage: () => number;
                                                  • Returns the last page number

                                                  method getTotalItems

                                                  getTotalItems: () => number;

                                                    method isFirstPage

                                                    isFirstPage: () => boolean;
                                                    • Returns true if current page is first page

                                                    method isLastPage

                                                    isLastPage: () => boolean;
                                                    • Returns true if current page is last page

                                                    method next

                                                    next: () => void;
                                                    • Go to the next page

                                                    method ngOnChanges

                                                    ngOnChanges: (changes: any) => void;

                                                      method ngOnDestroy

                                                      ngOnDestroy: () => void;

                                                        method ngOnInit

                                                        ngOnInit: () => void;

                                                          method previous

                                                          previous: () => void;
                                                          • Go to the previous page

                                                          method setCurrent

                                                          setCurrent: (page: number) => void;
                                                          • Set the current page number.

                                                          class PaginationService

                                                          class PaginationService {}

                                                            property change

                                                            change: EventEmitter<string>;

                                                              method defaultId

                                                              defaultId: () => string;

                                                                method getCurrentPage

                                                                getCurrentPage: (id: string) => number;
                                                                • Returns the current page number.

                                                                method getInstance

                                                                getInstance: (id?: string) => PaginationInstance;
                                                                • Returns a clone of the pagination instance object matching the id. If no id specified, returns the instance corresponding to the default id.

                                                                method register

                                                                register: (instance: PaginationInstance) => boolean;
                                                                • Register a PaginationInstance with this service. Returns a boolean value signifying whether the instance is new or updated (true = new or updated, false = unchanged).

                                                                method setCurrentPage

                                                                setCurrentPage: (id: string, page: number) => void;
                                                                • Sets the current page number.

                                                                method setItemsPerPage

                                                                setItemsPerPage: (id: string, itemsPerPage: number) => void;
                                                                • Sets the value of instance.itemsPerPage.

                                                                method setTotalItems

                                                                setTotalItems: (id: string, totalItems: number) => void;
                                                                • Sets the value of instance.totalItems


                                                                interface PaginationInstance

                                                                interface PaginationInstance {}

                                                                  property currentPage

                                                                  currentPage: number;
                                                                  • The current (active) page.

                                                                  property id

                                                                  id?: string;
                                                                  • An optional ID for the pagination instance. Only useful if you wish to have more than once instance at a time in a given component.

                                                                  property itemsPerPage

                                                                  itemsPerPage: number;
                                                                  • The number of items per paginated page.

                                                                  property totalItems

                                                                  totalItems?: number;
                                                                  • The total number of items in the collection. Only useful when doing server-side paging, where the collection size is limited to a single page returned by the server API.

                                                                    For in-memory paging, this property should not be set, as it will be automatically set to the value of collection.length.

                                                                  Package Files (8)

                                                                  Dependencies (0)

                                                                  No dependencies.

                                                                  Dev Dependencies (25)

                                                                  Peer Dependencies (2)


                                                                  To add a badge like this badgeto your package's README, use the codes available below.

                                                                  You may also use to create a custom badge linking to

                                                                  • Markdown
                                                                  • HTML
                                                                    <a href=""><img src="" alt=""></a>