Getting Error While doing pagination in angular 4 - angular4-forms

Question

I am new to angular 4. I am working in pagination using angular 4.I ahve installed "npm install ngx-pagination --save". I followed the instruction which was in internet. But I am getting error like "The pipe 'paginate' could not be found ("
]game of games | paginate: { itemsPerPage: 2, currentPage: p }">
{{i}}
"): ng:///ActivityChartModule/ActivityComponent.html#235:32
'pagination-controls' is not a known element:". I tried More. Can any one help me to comeout from this problem. Below are my code,
app.module.ts
import {NgxPaginationModule} from 'ngx-pagination';
imports: [NgxPaginationModule]
in component.ts
p: number = 1;
games = [
{
"id": "1",
"name": "DOTA 2",
"genre": "Strategy"
},
{
"id": "2",
"name": "AOE 3",
"genre": "Strategy"
},
{
"id": "3",
"name": "GTA 5",
"genre": "RPG"
},
{
"id": "4",
"name": "Far Cry 3",
"genre": "Action"
},
{
"id": "5",
"name": "GTA San Andreas",
"genre": "RPG"
},
{
"id": "6",
"name": "Hitman",
"genre": "Action"
},
{
"id": "7",
"name": "NFS MW",
"genre": "Sport"
}, {
"id": "8",
"name": "Fifa 16",
"genre": "Sport"
}, {
"id": "9",
"name": "NFS Sen 2",
"genre": "Sport"
}, {
"id": "10",
"name": "Witcher Assasins on King",
"genre": "Adventure"
}
];
in component.html
<div class="container">
<div class="row">
<nav class="navbar">
<input class="form-control" type="text" name="search">
</nav>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{i}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p($event)"></pagination-controls>
</div>
</div>
</div>

Answer 1

If you have already import NgxPaginationModule into app.module.ts, I think it is because you need to restart your project after npm install.
Try ctrl+c and ng serve to restart it again.

Answer 2

I resolved this problem, you need to include in your module.ts following code:
import {NgxPaginationModule} from 'ngx-pagination';
#NgModule({
imports: [ NgxPaginationModule ]
})

Answer 3

You should add CUSTOM_ELEMENTS_SCHEMA in angular-core
and
schemas: [ CUSTOM_ELEMENTS_SCHEMA ] ----add it in your #NgModule({})
refer this link: https://hassantariqblog.wordpress.com/2016/10/12/angular2-template-parse-errors-add-custom_elements_schema-to-the-ngmodule-schemas/

Answer 4

I copied your code and did not face the error you faced. However, the variable p used is actually an event and not a number[].
Replace the table and pagination-control element as per below in app.component.html:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Genre</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of games | paginate: { itemsPerPage: 2, currentPage: p }">
<td>{{game.id}}</td>
<td>{{game.name}}</td>
<td>{{game.genre}}</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
Also, declaring p within app.component.ts isn't required as its the paginationApi that gets used internally.
Side note: The error you are getting suggests that the ngx-pagination is not installed successfully. Please check if you have the ngx-pagination folder copied within your project's node_modules folder successfully.
Demo: https://angular-ijtgcv.stackblitz.io

Answer 5

Try changing the order of "import {NgxPaginationModule} from 'ngx-pagination';"
in app.module.ts
It works out for me

Answer 6

after importing NgxPaginationModule to app.module.ts and stop the local server 'npm update' worked for me !