QPager

npm install ng-qpager --save-dev

Example

import { Component } from "@angular/core";
import { PagerChanged, PagerParams} from "ng-qpager";

@Component({
    selector: "pager-example",
    template: `
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Email</th>
                    <th>Telephone</th>
                </tr>
            </thead>

            <tbody>
                <tr *ngFor="let item of pagerChanged.items; let i = index">
                    <td>{{ pagerChanged.startIndex + i + 1}}</td>
                    <td>{{item.title}} {{item.firstName}} {{item.lastName}}</td>
                    <td>{{item.position}}</td>
                    <td>{{item.email}}</td>
                    <td>{{item.telephone}}</td>
                    <td> </td>
                </tr>
            </tbody>
        </table>
    <QPager [params]="pagerParams" (onPageChanged)="onPageChanged($event)"></QPager>
    `
})
export class PagerExample {

    pagerParams = new PagerParams();
    pagerChanged = new PagerChanged();

    constructor() {
        this.pagerParams.items = [
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
            { title: "Title A" },
        ];
    }

    onPageChanged(event) {
        this.pagerChanged = event;
    }
}