LarangPaginator (Angular 4^ & ^5...)

This is a Laravel Angular Paginator for tables. For other backend language to use this library. Please make sure your success response conforms with this response:

Note: the "data" key holding the payload can either be 'resource' || 'resources' || 'content' || 'contents' || 'items' || 'list' || no key specified holding the payload in response

data: {
         "total": 50,
         "per_page": 15,
         "current_page": 1,
         "last_page": 4,
         "next_page_url": "http://laravel.app?page=2",
         "prev_page_url": null,
         "path": "http://laravel.app",
         "from": 1,
         "to": 15,
         "data":[
              {
                  // Result Object
              },
              {
                  // Result Object
              }
          ]
      }

Release Note

Due to compatibility issues in Angular 4 & 5, we will maintain all:

Angular 4 from 4.0.0 and above.
Angular 5 from 5.0.0 and above.

Sample Usage

You can download sample usage of this library for angular 4 & 5 from release note through this url

https://github.com/Procaseycash/use-larang-paginator

Dependencies

npm install font-awesome --save

Read up on how to setup font-awesome in your application.

Installation

npm install --save larang-paginator

Usage in Application

Follow the instruction below to use LarangPaginator.

import {LarangPaginatorModule} from 'larang-paginator';

Add LarangPaginatorModule.forRoot() in AppModule or Other Modules using LarangPaginatorModule

Notice:

path: full path of the api url to call for data.
from: the key the eventService will use in mapping when data has responded from paginator. (from key must be unique to every component using pagination)
data: (paginated response), this must be the first data rendered from the component which information are picked to generate the pagination.
limit: paginated data per page, default is 50.
perNav: navigation bar to show at a time: defualt is 5.
viewPage: string value to hold the Integer value for the next page. default is 'page'
paginate: string value to hold the Integer value for limit in a view page. defualt is 'paginate'.

 
Note that the query string in (next_page_url & prev_page_url) must be thesame to what is passed down in viewPage & paginate for paginator to work with.

A sample larangPaginator built url for paginating will be http://localhost:8088/api/organizations?page=1&paginate=5

*.component.ts

Add/refactor the following code to the appropriate places in your component.ts

import {Component, OnInit} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {EventsService} from "larang-paginator";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  public paginator = {
    path: 'http://localhost:8088/api/organizations',
    limit: 5,
    perNav: 5,
    data: null,
    from: 'list_organizations'

  };

  constructor(private eventsService: EventsService, private http: HttpClient) {
    this.eventsService.on(this.paginator.from, (res) => {
      // pass response to the property rendering the data in view

      this.paginator.data = res.data; // update paginated data in view
    });
  }
  private getOrganizations() {
    this.http.get(this.paginator.path + `?page=1&paginate=${this.paginator.limit}`).subscribe(
      (res) => {
        this.paginator.data = res['data'];
      },
      (err) => {

      }
    );
  }

  ngOnInit() {
    this.getOrganizations();
  }
}

      

*.component.html

Add this below the table you want it to paginate data from backend.

<div  *ngIf="paginator.data"  class="col-sm-6 col-sm-auto">
 <table width="100%" class="table table-striped table-responsive">
   <tr>
     <td>#</td>
     <td>Name</td>
     <td>Email</td>
   </tr>

   <tr *ngFor="let page of paginator.data['data']; let i = index;">
     <td>{{((paginator.data['current_page'] - 1) * paginator.limit + i + 1) || (i + 1)}}</td>
     <td>{{page?.name}}</td>
     <td>{{page?.email}}</td>
   </tr>

 </table>
  
 <!-- You can add viewPage & paginate name. the default sample will be page=1&paginate=40
      you can inject [viewPage]="'perPage'", [paginate]="'limit'" and u get a sample of perPage=1&limit=40 
      
      -->
 
 <app-paginator [from]="paginator.from" [data]="paginator.data" [path]="paginator.path"
                [limit]="paginator.limit" [perNav]="paginator.perNav"></app-paginator>

</div>

Backend expected request

Your backend will expect

viewPage: integer to determine next page
paginate: integer to determine limit of data per view page.

Build as a package

npm run pack-build

Publish to npm

npm publish dist