NgRgaPaginaion

A package in angular to integrate with API an example: HERE

Getting Started

You need Angular CLI greater or equal to v7 if yo don't have it you can check here or here

Installing

npm i ng-rga-paginaion --save

Usage

In app.module.ts: add

Import the module:

import { NgRgaPaginaionModule } from 'ng-rga-paginaion';

Add NgRgaPaginaionModule to NgModule imports:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    NgRgaPaginaionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In our component class add the next:

@Component({
  ...
})
export class Example  extends Pagination

In consturctor add:

constructor() { super(); }

You must add a service function to called every time when user select between pages and name function as get with params like params: string = '':

public get(params: string = ''): void {
    this.http.get<any>(`https://reqres.in/api/users${params}`).toPromise().then(response);
}

When api request response you need to set the meta pagination data from the API: the meta must be a RgaMeta type:

public get(params: string = ''): void {
    (...).then(response => {
      const data = response.data;
      const meta: RgaMeta = {
        count: response.data.length,
        currentPage: response.page,
        perPage: response.per_page,
        total: response.total,
        totalPages: response.total_pages,
      };
      this.data = data;
      this.setMeta(meta);
    });
}

If you want call a list service when components init add this in ngOnInit angular function:

ngOnInit() {
    this.get(this.buildFilters());
}

HTML component

For search input add:

<lb-rga-table-searchbar (inputKeyUp)="filterTableData($event)"> </lb-rga-table-searchbar>

For pagination actions add:

 <lb-rga-table-pagination
          [meta]="meta"
          (nextPage)="nextPage()"
          (prevPage)="prevPage()"
          (lastPage)="lastPage()"
          (firstPage)="firstPage()"
          (goToPage)="goToPage($event)"
          *ngIf="meta.totalPages > 1">
  </lb-rga-table-pagination>

For body the functions onSortData and getSortIcon must get as a param the name of field that API required:

<table>
    <tr>
      <th (click)="onSortData('field_one')"> <mat-icon [svgIcon]="getSortIcon('field_one')"></mat-icon>Id</th>
      <th (click)="onSortData('field_two')"> <mat-icon [svgIcon]="getSortIcon('field_two')"></mat-icon>Avatar</th>
    </tr>
    <tr *ngFor="let row of data">
      <td>{{row.field_one}}</td>
      <td>{{row.field_two}}</td>
    </tr>
  </table>

Final examples

Example.component.ts

Finally in our component we have te next:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Pagination, RgaMeta } from 'ng-rga-paginaion';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class Example  extends Pagination implements OnInit {
  public data: any[] = [];
  constructor(private http: HttpClient) { super(); }

  ngOnInit() {
    this.get(this.buildFilters());
  }

  public get(params: string = '') {
    this.http.get<any>(`https://reqres.in/api/users${params}`)
    .toPromise()
    .then(response => {
      const data = response.data;
      const meta: RgaMeta = {
        count: response.data.length,
        currentPage: response.page,
        perPage: response.per_page,
        total: response.total,
        totalPages: response.total_pages,
      };
      this.data = data;
      this.setMeta(meta);
    });
  }
}

Example.component.html

Finally in our html we have te next:

<lb-rga-table-searchbar (inputKeyUp)="filterTableData($event)"> </lb-rga-table-searchbar>

<table>
  <tr>
    <th (click)="onSortData('field_one')"> <mat-icon [svgIcon]="getSortIcon('field_one')"></mat-icon>Id</th>
    <th (click)="onSortData('field_two')"> <mat-icon [svgIcon]="getSortIcon('field_two')"></mat-icon>Avatar</th>
  </tr>
  <tr *ngFor="let row of data">
    <td>{{row.field_one}}</td>
    <td>{{row.field_two}}</td>
  </tr>
</table>
  
<lb-rga-table-pagination
         [meta]="meta"
         (nextPage)="nextPage()"
         (prevPage)="prevPage()"
         (lastPage)="lastPage()"
         (firstPage)="firstPage()"
         (goToPage)="goToPage($event)"
         *ngIf="meta.totalPages > 1">
</lb-rga-table-pagination>

HTML replace component

We can replace html component for own html style for lb-rga-table-searchbar and lb-rga-table-pagination, for each component follow examples bellow.

Tag lb-rga-table-searchbar and component

In Example component we must import TableSearchbarComponent and use a view child.

import { TableSearchbarComponent } from 'ng-rga-paginaion';

Add ViewChild to Example component:

export class Example extends Pagination implements OnInit {
  .......
  @ViewChild(TableSearchbarComponent) search: TableSearchbarComponent;
  .......
}

For add own html in component use next code bracers [template]="templateRef" inside of add the template ref, you must put inside of ng-template your html.

<lb-rga-table-searchbar (inputKeyUp)="filterTableData($event)" [template]="searchTemplate"> </lb-rga-table-searchbar>
<ng-template #searchTemplate>
    <div class="CatalogSearchbar">
      <mat-form-field class="mat-square-input mr-2">
        <input matInput
               autocomplete="off"
               type="text"
               [(ngModel)]="search.value"
               (keyup)="search.onKeyUp($event)">
        <mat-icon *ngIf="search.value.length === 0"> search</mat-icon>
        <button class="CatalogSearchbar-cleanButton"
                mat-button
                disableRipple
                (click)="search.clear()"
                *ngIf="search.value.length > 0">
          <mat-icon>close</mat-icon>
        </button>
      </mat-form-field>
      <button class="CatalogSearchBar-button" mat-raised-button color="primary" (click)="search.search()"> Search </button>
    </div>
</ng-template>

Component properties(P) and functions (F)

P & F	Description	Params
onKeyUp	Emit inputKeyUp function	$event
clear	Clear model property value
search	In build
value	Model for input search
template	Input for template ref

Tag lb-rga-table-pagination and component

In Example component we must import TablePaginationComponent and use a view child

import { TablePaginationComponent } from 'ng-rga-paginaion';

Add ViewChild to Example component:

export class Example extends Pagination implements OnInit {
  .......
  @ViewChild(TablePaginationComponent) paginate: TablePaginationComponent;
  .......
}

For add own html in component use next code bracers [template]="templateRef" inside of add the template ref, you must put inside of ng-template your html

  <lb-rga-table-pagination
          [template]="paginateTemplate"
          [meta]="meta"
          (nextPage)="nextPage()"
          (prevPage)="prevPage()"
          (lastPage)="lastPage()"
          (firstPage)="firstPage()"
          (goToPage)="goToPage($event)">
  </lb-rga-table-pagination>
  
  <ng-template #paginateTemplate>
    <footer class="Pagination pt-2" >
      <p class="Pagination-label">{{paginate.meta.total}} items</p>
  
      <button mat-button (click)="paginate.first()"><mat-icon>fast_rewind</mat-icon></button>
      <button mat-button (click)="paginate.prev()" [disabled]="paginate.disableWhenFirst()">
        <mat-icon>skip_previous</mat-icon>
      </button>
      <mat-form-field class="mat-square-input">
        <input matInput type="text"
               [(ngModel)]="paginate.meta.currentPage"
               #inpunt
               (keyup)="paginate.goTo(inpunt.value)">
      </mat-form-field>
  
      <p class="Pagination-label">of {{paginate.meta.totalPages}}</p>
  
      <button mat-button (click)="paginate.next()" [disabled]="paginate.disableWhenLast()">
        <mat-icon>skip_next</mat-icon>
      </button>
      <button mat-button (click)="paginate.last()" [disabled]="paginate.disableWhenLast()">
        <mat-icon>fast_forward</mat-icon>
      </button>
    </footer>
  </ng-template>

Component properties(P) and functions (F)

P & F	Description	Params
meta	Property that contains meta data
template	Input for template ref
nextPage	Output emit function
prevPage	Output emit function
lastPage	Output emit function
firstPage	Output emit function
goToPage	Output emit function
disableWhenLast	Show next page or last
disableWhenFirst	Show prev page or first
next	Emmit next page
prev	Emmit prev page
last	Emmit last page
first	Emmit first page
goTo	Emmit goTo page	page