ng2-bs-pagination
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.11 • Public • Published

    Angular 2 bootstrap pagination

    Install

    npm i -S ng2-bs-pagination

    SystemJS usage

    paths: {
        // paths serve as alias
        'npm:': 'node_modules/',},
    map:{
        'ng2-bs-pagination' : 'npm:ng2-bs-pagination'
    },
    packages: {
        'ng2-bs-pagination': {
            main: './index.js',
            defaultExtension: 'js'
        }
    }

    Settings

    • [totalItems] - number- Total items in a collection.
    • [currentPage] - number - Current page.
    • [pageSize] - number - Items per page.
    • [pageChange] - EventEmitter - Page change event.
    • [offset] - number - Page items count from left and right side from current page item in the pagination.
    • [previous-text] - string - Previous button text.
    • [next-text] - string - Next button text.
    • [first-text] - string - First button text.
    • [last-text] - string - Last button text.

    Usage

    // Module file 
    import {PaginationModule} from 'ng2-bs-pagination';
     
    @NgModule({
      imports:      [ PaginationModule ],
      declarations: [ AppComponent, TestPaginationComponent ],
      bootstrap:    [ AppComponent ]
    })
     
    // Component file
    import {Component, OnInit} from "@angular/core";
    import {PaginationPipe, PaginationInterface} from "ng2-bs-pagination";
     
    @Component({
        moduleId: module.id,
        selector: 'test-paginaion',
        templateUrl: 'test-pagination.component.html',
        providers: [PaginationPipe]
    })
    export class TestPaginationComponent implements OnInit {
        collection: Array<{}>;
     
        currentPage: number = 1;
        totalItems: number = 200; // total numbar of page not items
        pageSize: number = 10; // max page size
     
        public onPageChange(event: any): void {
            this.currentPage = event.currentPage;
        };
     
        public paginationArgs() : PaginationInterface{
            return {
                currentPage : this.currentPage,
                totalItems : this.totalItems,
                pageSize : this.pageSize
            }
        }
     
        ngOnInit(): void {
            let collection = [];
            for (let i = 0; i < 1000; i++) {
                collection.push({
                    name: i
                });
            }
            this.collection = collection;
        }
    }

    test-pagination.component.html

    <ul>
        <li *ngFor="let data of collection | pagination: paginationArgs();">
            {{data.name}}
        </li>
    </ul>
     
    <ng-pagination [totalItems]="totalItems"
                   [currentPage]="currentPage"
                   [pageSize]="pageSize"
                   (pageChange)="onPageChange($event)"
                   previous-text="&lsaquo;"
                   next-text="&rsaquo;"
                   first-text="First"
                   last-text="Last">
    </ng-pagination>

    Todo

    • Implement webpack. It does not work yet.

    Install

    npm i ng2-bs-pagination

    DownloadsWeekly Downloads

    0

    Version

    1.1.11

    License

    ISC

    Last publish

    Collaborators

    • lexxorlov