# Epom-ng2-paginator
Implements pagination on the pages.
Gets 2 streams: incoming and outgoing. At the first - data from the component is thrown, in the second - it itself throws data filtered by the number.



## Getting Started
Depends from **lodash.js**

### Prerequisites

| Name | Description |
| ---- | ----------- |
| `lodash` | we need `lodash.range()`|
|`epom-ng2-language-service`| we need multi-language |

##### Installing lodash

Install `lodash` using:

```sh
$ npm install --save lodash@4.17.4
```
and epom-ng2-language-service
```sh
$ npm install --save epom-ng2-language-service
```

### Installing

Install epom-ng2-paginator via npm:
```sh
$ npm install --save epom-ng2-paginator
```
Import `PaginatorModule` in module where you want to use it
```typescript
    import {PaginatorModule} from 'epom-ng2-paginator';

    export class SomeComponent {
        imports: [
            PaginatorModule,
            ...
        ];
    }
```
## Parts
    .
    |-- epom-ng2-paginator
    |   |-- index
    |   |-- paginator.component
    |   |-- paginator.module

## Input properties (@Input)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **incoming** | Subject<Array<any>> | Component send information to the paginator in this Subject |
| **outcoming** | Subject<Array<any>> | Component receive information from the paginator in this Subject |
| **pageValue** | number | current page number |
| **perPage** | number | how many entities can be shown on page |
| **noDataMode** | boolean | this is a flag for switch paginator to mode without changin data - only changing numbers |
| **totalRows** | Subject<number> | this parameter use only in noDataMode - to know paginator quantity of rows | 

## Output properties (@Output)
| Name             | Type | Description                   |
| ---------------- | ---- | ----------------------------- |
| **changePageEvent** | EventEmitter<ChangePageEventType> | Event emmiter to parent component with current page index and per page rows quantity |

Examples:
```javascript
    some-component-template.html
    <epom-paginator [incoming]="allEntitiesStream$" [outcoming]="sortedEntities$" [perPage]="12"></epom-paginator>
```


## Module Examples

```javascript
    @Decorator({
        selector: 'someSelector',
        tempate: `
            <!-- iterate by sorted data from paginator (using async pipe for data from observables)-->
            <div class='entitie' *ngFor='let entitie of sortedEntities$ | aync'>{{entitie}}</div>
            <epom-paginator [incoming]="allEntitiesStream$" [outcoming]="sortedEntities$" [perPage]="12"></epom-paginator>
        `
    })
    export class SomeComponent {
        private getDataSubscription;
        //define subjects for pagination
        private allEntitiesStream$ = new Subject();
        private sortedEntities$ = new Subject();
        constructor(http: Http) {
            this.http.getSomeData().subscribe((response) =>
                //send data to paginator
                this.allEntitiesStream$.next(response)
            );
        }
    }
```

## API Reference

**lodash** - https://lodash.com/docs/

## Contributors

Gennady Strelets <g.strelets@itmgmedia.net>
