• Version 2.0.2
  • Published
  • No dependencies
  • MIT license


npm i ng2-pagination
yarn add ng2-pagination
pnpm add ng2-pagination


Pagination for Angular



class Ng2PaginationModule

class Ng2PaginationModule {}

    class PaginatePipe

    class PaginatePipe {}


      constructor(service: PaginationService);

        method transform

        transform: (collection: any[], args: any) => any;

          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 pageChange

                    pageChange: EventEmitter<number>;

                      property previousLabel

                      previousLabel: string;

                        property screenReaderCurrentLabel

                        screenReaderCurrentLabel: string;

                          property screenReaderPageLabel

                          screenReaderPageLabel: string;

                            property screenReaderPaginationLabel

                            screenReaderPaginationLabel: string;

                              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 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 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) => void;

                                                      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 (6)

                                                        Dependencies (0)

                                                        No dependencies.

                                                        Dev Dependencies (41)

                                                        Peer Dependencies (0)

                                                        No peer dependencies.


                                                        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>