Issue
I want to add pagination controls in my Ionic application so I install npm i ngx-pagination
and I import it in my app-modules.ts.
I made this copy of my application to test it with local table after that it will be linked to a data base but us you can see when I click to page 2 or page 3 is not working it is stack on page 1
please can you help me
here you can see the image of my application :
here you can see the HTML code :
<table class="table">
<tr>
<th>مجموع</th>
<th>تم</th>
<th>مثبت</th>
<th>الاسم و اللقب</th>
<th>عون الجرد</th>
</tr>
<tr
routerLink="/invo-list"
*ngFor="let item of employeeL | paginate:{itemsPerPage:5,currentPage:1}"
>
<td>20</td>
<td>20</td>
<td><ion-checkbox slot="end"></ion-checkbox></td>
<td>{{item.name}}</td>
<td>{{item.matricule}}</td>
</tr>
</table>
<pagination-controls (pageChange)="p = $event"></pagination-controls>here the ts file
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-folder',
templateUrl: './folder.page.html',
styleUrls: ['./folder.page.scss'],
})
export class FolderPage implements OnInit {
p: Number=1;
employeeL=[
{matricule:1125,name:'ali',lastname:'ben mohammed'},
{matricule:1295,name:'muhammed',lastname:'salah'},
{matricule:1132,name:'youssef',lastname:'najjar'},
{matricule:1196,name:'mohssin',lastname:'ben moussa'},
{matricule:1295,name:'muhammed',lastname:'salah'},
{matricule:1132,name:'youssef',lastname:'najjar'},
{matricule:1295,name:'muhammed',lastname:'salah'},
{matricule:1132,name:'youssef',lastname:'najjar'},
{matricule:1295,name:'muhammed',lastname:'salah'},
{matricule:1132,name:'youssef',lastname:'najjar'},
{matricule:1295,name:'muhammed',lastname:'salah'},
{matricule:1132,name:'youssef',lastname:'najjar'},
{matricule:1295,name:'muhammed',lastname:'salah'},
{matricule:1132,name:'youssef',lastname:'najjar'}]
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit() {
this.folder = this.activatedRoute.snapshot.paramMap.get('id');
}}Solution
<tr
routerLink="/invo-list"
*ngFor="let item of employeeL | paginate:{itemsPerPage:5,currentPage:p}"
>
currentPage should be change with p.