brewdigital-pagination v0.0.4
Brew Pagination Angular
Installation
A pagination system for Angular
Install
npm install brewdigital-pagination
oryarn 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
oryarn 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>