# cos-pagination

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

Latest version **2.0.4** (published 2020-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install cos-pagination
pnpm add cos-pagination
yarn add cos-pagination
bun add cos-pagination
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2020-04-03 |
| First published | 2019-08-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 132 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | cosinus |

## Links

- npm: https://www.npmjs.com/package/cos-pagination
- Repository: https://github.com/cheikhomarsow/cos-ng-pagination
- Homepage: https://github.com/cheikhomarsow/cos-ng-pagination#readme
- Issues: https://github.com/cheikhomarsow/cos-ng-pagination/issues
- npm.io page: https://npm.io/package/cos-pagination

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 2.0.4 (latest) — 2020-04-03
- 2.0.3 — 2020-04-03
- 2.0.2 — 2020-03-10
- 2.0.0 — 2020-03-10
- 1.4.2 — 2020-03-10
- 1.4.0 — 2020-03-09
- 1.1.0 — 2019-12-19
- 1.0.4 — 2019-08-27
- 1.0.3 — 2019-08-26
- 1.0.2 — 2019-08-26
- 1.0.1 — 2019-08-26
- 1.0.0 — 2019-08-24

## README

### Generic Pagination for Angular

Angular component that provides pagination. Navigating through the pagination triggers an event that will load the current page. 
[DEMO](https://stackblitz.com/edit/angular-qckd5k)

#### Install

The module can be installed using [npm](https://www.npmjs.com).

```javascript
npm i cos-pagination
```

#### Usage

Import **CosNgPaginationModule** from **cos-pagination**:

```javascript
import { CosNgPaginationModule } from 'cos-pagination'
```

Add **CosNgPaginationModule** to the imports of your NgModule:

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

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

```javascript
<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.

---
_Source: https://npm.io/package/cos-pagination · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._