cos-pagination

Generic Pagination for Angular

Angular component that provides pagination. Navigating through the pagination triggers an event that will load the current page. DEMO

Install

The module can be installed using npm.

npm i cos-pagination

Usage

Import CosNgPaginationModule from cos-pagination:

import { CosNgPaginationModule } from 'cos-pagination'

Add CosNgPaginationModule to the imports of your NgModule:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CosNgPaginationModule
  ],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

use in your templates to add pagination in your view like below

<cos-pagination [total]="total" [current]="current" [size]="size" (pageChanged)="onPageChanged($event)"></cos-pagination>

Options

• total

  [Number] The total number of items in the database.

• size

  [Number] The number of items to display per page.

• current

  [Number] Current page (active) page number.

• startFrom

  [Number] Start index, should equals to 0 or 1. Default is 1.

• isDirectionLinksEnabled

  [boolean] If set to false, the "previous" and "next" links will not be displayed. Default is true.

• pageChanged

  [event handler] The expression specified will be invoked whenever the page changes via a click on one of the pagination controls. The $event argument will be the number of the new page. This should be used to update the value of the currentPage variable which was passed to the PaginatePipe.

• language

  [string] Default language is English ('en'). Also French ('fr'), Portuguese ('pt') are available

• info

  [boolean] If set to false, information about the table will not be displayed. Default is true.

For making the styling work fine, you should included bootstrap to your project.