Angular2 Pagination not working

Question

I am using angular 2 beta. I am also using ng2 boostrap for showing pagination. But I am getting an error EXCEPTION: Template parse errors: The pipe 'paginate' could not be found.

Here is my code:

Below showing is the .ts file in which I am dynamically loading my data in the table. Also I have included pagination directives from ng-bootsrap.

import {Component, EventEmitter, OnInit, Input} from 'angular2/core';
import {pagination, tableContent} from './interface';
import {CORE_DIRECTIVES} from 'angular2/common';
import {PAGINATION_DIRECTIVES} from './ng2-bootstrap/ng2-bootstrap';


@Component({
    selector: 'table-content',
    template: `
         <pagination [totalItems]="totalItems" [itemsPerPage]='2' (pageChanged)="pageChanged($event)" [(ngModel)]="currentPage" [maxSize]="maxSize" class="pagination-sm" [boundaryLinks]="true"></pagination>
         <thead>
              <tr>
                  <th></th><th></th><th></th><th></th><th></th><th></th><th></th>
              </tr>
          </thead>
          <tbody>
          <tr *ngFor="#i of tablecontents" >
               <td class="text-centre">
                   <div class="rm-checkbox">
                       <input type="checkbox" id="" name="" value="1" tabindex="109">
                   </div>
               </td>
               <td>{{i.name}}</td>
               <td>{{i.email}}</td>
               <td>{{i.type}}</td>
               <td>{{i.content}}</td>
               <td>{{i.priority}}</td>
               <td>{{i.TTL}}</td>
           </tr>
        </tbody>`,
    directives: [PAGINATION_DIRECTIVES, FORM_DIRECTIVES, CORE_DIRECTIVES]
})
export class tablecontent implements OnInit {

    constructor() {
        this.name = 'Rules';
        this.ruleCount = 100;
        this.tablecontents = 'table.json'
        this.totalItems = tablecontents.length;
        this.bigTotalItems = tablecontents.length;
        this.currentPage = 4;
        this.maxSize = 5;
        this.bigCurrentPage = 1;
    }
    perPageCounts: perPageCount[] = [
        { text: '10', value: 1 },
        { text: '25', value: 2 },
        { text: '50', value: 3 },
        { text: '100', value: 4 }
    ];


    private setPage(pageNo: number): void {
        this.currentPage = pageNo;
    };

    private pageChanged(event: any): void {
        console.log('Page changed to: ' + event.page);
        console.log('Number items per page: ' + event.itemsPerPage);
    };
}

Could somebody please help

Answer 1

Download that source program from github. Next look into the src folder. There will be two files:

1. pagination-service.ts
2. paginate-pipe.ts

Copy the two files into your project. Next import them into app.module.ts. (The documentation in github is not complete.)

Answer 2

Another option is a custom pagination service instead of ng2 bootstrap, I just posted this pagination example which uses logic like google search results.

PagerService that handles the pagination logic:

import * as _ from 'underscore';

export class PagerService {
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);

        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

AppComponent that uses the pager service:

import { Component, OnInit } from '@angular/core';

import * as _ from 'underscore';

import { PagerService } from './_services/index'

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent {
    constructor(private pagerService: PagerService) { }

    // dummy array of items to be paged
    private dummyItems = _.range(1, 151);

    // pager object
    pager: any = {};

    // paged items
    pagedItems: any[];

    ngOnInit() {
        // initialize to page 1
        this.setPage(1);
    }

    setPage(page: number) {
        if (page < 1) {
            return;
        }

        // get pager object from service
        this.pager = this.pagerService.getPager(this.dummyItems.length, page);

        // get current page of items
        this.pagedItems = this.dummyItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
    }
}

AppComponent HTML that displays paged items and pager controls:

<div>
    <div class="container">
        <div class="text-center">
            <h1>Angular 2 - Pagination Example with logic like Google</h1>

            <!-- items being paged -->
            <div *ngFor="let item of pagedItems">Item {{item}}</div>

            <!-- pager -->
            <ul *ngIf="pager.pages.length" class="pagination">
                <li [ngClass]="{disabled:pager.currentPage === 1}">
                    <a (click)="setPage(1)">First</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === 1}">
                    <a (click)="setPage(pager.currentPage - 1)">Previous</a>
                </li>
                <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                    <a (click)="setPage(page)">{{page}}</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                    <a (click)="setPage(pager.currentPage + 1)">Next</a>
                </li>
                <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                    <a (click)="setPage(pager.totalPages)">Last</a>
                </li>
            </ul>
        </div>
    </div>
</div>

More details and a working demo are available on this post.

Answer 3

Pipes need to be added to pipes: [MyPipe]. Your tablecontent component doesn't provide a pipes: parameter for paginate.

See also https://angular.io/docs/ts/latest/guide/pipes.html