# Brew Pagination Angular

## Installation

A pagination system for Angular

Install 

`npm install brewdigital-pagination`  
or  
`yarn add brewdigital-pagination`

### Brew Requests

The pagination service relies on the `brewdigital-requests` package. You may need to install it with:

`npm install brewdigital-requests`  
or  
`yarn add brewdigital-requests`  

See [brewdigital-requests](https://www.npmjs.com/package/brewdigital-requests) for documentation.

## Getting Started

First `import` the `BrewPaginationModule` into a one of your apps modules. This will setup some services that are required by the `PaginationModule` that is provided at a component level.

You will also need to import the `BrewRequestsModule`, `RouterModule` and `HttpClientModule`.

```typescript
import {NgModule} from '@angular/core';
import {MockyComponent} from './app.component';
import {HttpClientModule} from '@angular/common/http';
import {RouterModule} from '@angular/router';
import {BrewRequestsModule} from 'brewdigital-requests';
import {BrewPaginationModule} from 'brewdigital-pagination';

@NgModule({
    // ...
    imports: [
        // ...
        HttpClientModule,
        RouterModule,
        BrewRequestsModule,
        BrewPaginationModule,
    ],
    bootstrap: [MockyComponent]
})
export class AppModule {
}
```

### Setting Base API URL

Then add a base route for the API. This will be prepended to API requests unless `withApiUrl` is set to false (see below for more on this). 

```typescript
import {NgModule} from '@angular/core';

@NgModule({
  // ...
  providers: [
      {provide: 'apiUrl', useValue: 'https://jsonplaceholder.typicode.com'},
    ],
  // ...
})
export class AppModule {}
```

## Usage

### Providing Pagination to a Component

Include the `PaginationComponent` in your components module. If your module doesn't have a module create one. 

```typescript
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {PaginationComponent} from 'brewdigital-pagination';

@NgModule({
    imports: [
        CommonModule,
        PaginationComponent
    ],
    declarations: [ExampleComponentModule],
})
export class ExampleComponentModule {
}
```

### Example Component

To use pagination in a component, provide the component with the `BrewPaginationService`. This will give the component access to the pagination methods, data and request.

The `this.pagination.getPage()` method is a wrapper around a `brewdigital-requests` `GetRequest`. It expects to receive data in that fulfils the `Pagination` type interface:

*Expected Response Example*
```json
{
  "data": [
      {
          "title":"Title 1",
          "description":"Blah blah blah"
      },
      {
          "title":"Title 2",
          "description":"Blah blah blah"
      },
      {
          "title":"Title 3",
          "description":"Blah blah blah"
     }
  ],
  "meta":{
      "page":0,
      "limit":0,
      "total":0
  }
}
```

This will populate the `pagedData$` `BehaviourSubject` and can be accessed in the component.

```typescript
import {Component} from '@angular/core';
import {BrewPaginationService} from 'projects/brew-pagination/src/lib/brew-pagination.service';
import {RequestInterface} from 'brewdigital-requests';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  providers: [
      BrewPaginationService
  ]
})
export class MockyComponent {
  constructor(
      private pagination: BrewPaginationService
  ) {}

  get pagedData$() {
    return this.pagination.pagedData$;
  }

  get request(): RequestInterface {
    return this.pagination.request;
  }

  async ngOnInit() {
    this.getPage();
  }

  getPage(page = 1) {
    this.pagination.getPage('/posts', {page});
  }
}
```

#### Display Response

*Loop pagedData$*
```angular2html
<div *ngFor="let row of (pagedData$ | async).data">
   {{row.title}}
</div>
```

#### Display Pagination Controls

*Plain styles*
```angular2html
<app-pagination
    (handlePageChange)="getPage($event)" [pagedData$]="pagedData$"
></app-pagination>
```

*Bootstrap styles*
```angular2html
<app-pagination-bootstrap
    (handlePageChange)="getPage($event)" [pagedData$]="pagedData$"
></app-pagination-bootstrap>
```