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

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).

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.

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

{
  "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.

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$

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

Display Pagination Controls

Plain styles

<app-pagination
    (handlePageChange)="getPage($event)" [pagedData$]="pagedData$"
></app-pagination>

Bootstrap styles

<app-pagination-bootstrap
    (handlePageChange)="getPage($event)" [pagedData$]="pagedData$"
></app-pagination-bootstrap>