ng2-Pagination in Angular 2

Question

i am following a documentation on how to implement ng2-pagination in angular 2 . Below is my code. However, i am falling into bit of errors showing in my terminal. What could i be doing wrongly? My angular version is 2.3.0

table.html

  <tr>

    <th>Country</th>
    <th>Continent</th>
</tr>

  <tbody>
    <tr *ngFor="let key of Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >
      <td>{{i + 1}}</td>
      <td>{{Country[key].name}}</td>
      <td>{{Country[key].continent}}</td>

     </tr>

  </tbody>

</table>
<div class="has-text-centered">
    <pagination-controls (pageChange)="page = $event"></pagination-controls>
</div>

component

 Component({

        changeDetection: ChangeDetectionStrategy.OnPush



    })


    export class CountryComponent {

        @Input('data') Country:string[] =[];
        page: number = 1;

        //store incoming data

        Country: Country[] = [];
constructor(private httpService: HttpService, private router: Router) {



        this.httpService.getCountry()
            .subscribe(data => {
                    this.Country = data;
                }
            );

    }

error

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngForPaginate' since it isn't a known property of 'tr'. ("

  <tbody>
    <tr [ERROR ->]*ngFor="let key of Country | keys  paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >"): CountryComponent@92:8
Property binding ngForPaginate not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("

Answer 1

We can use this code snippet to implement pagination in angular 2. it work perfectly for me.

Run npm install ngx-pagination --save

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}

my.component.ts

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

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> {{item}} </li>
    </ul>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = ["a","b","","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t"];  
}

Answer 2

1.npm install ng2-pagination --save

2.import {Ng2PaginationModule} from 'ng2-pagination'; //importing ng2-pagination into your app.module.ts file

@NgModule({ imports: [Ng2PaginationModule ]

<tr>

    <th>Country</th>
    <th>Continent</th>
</tr>

  <tbody>
    <tr *ngFor="let key of Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}; let i = index" >
      <td>{{i + 1}}</td>
      <td>{{Country[key].name}}</td>
      <td>{{Country[key].continent}}</td>

     </tr>

  </tbody>

</table>
<pagination-controls (pageChange)="page = $event" id="1"
                      maxSize="5"
                      directionLinks="true"
                     >
                </pagination-controls>

Answer 3

\n

\n

\n

<tr *ngFor="let key of (Country | keys | paginate: {itemsPerPage: 10 , currentPage: page}); let i = index" >

\n

\n

\n