How do I implement paging (JwPaginationModule) in my Ionic app? - css

Question

I have a list with cars. Now I want to integrate paging because of the many records.
This is my ListViewPageModule in which I imported JwPagingationModule:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { JwPaginationModule } from 'jw-angular-pagination';
import { IonicModule } from '#ionic/angular';
import { ListViewPageRoutingModule } from './list-view-routing.module';
import { ListViewPage } from './list-view.page';
import { ComponentsModule } from '../components.module';
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ComponentsModule,
ListViewPageRoutingModule,
JwPaginationModule
],
declarations: [ListViewPage]
})
export class ListViewPageModule {}
My Component:
#Component({
selector: 'app-list-view',
templateUrl: './list-view.page.html',
styleUrls: ['./list-view.page.scss'],
})
export class ListViewPage implements OnInit {
structureGroups: StructureGroup[] = [];
lablesHeadlines = lablesHeadlines;
headlines = lablesHeadlines;
pageOfItems: Array<any>;
constructor(private listClientService: ListClientServiceService, private router: Router) { }
ngOnInit() {
this.listClientService.getAllCarGroupNamesWithId().subscribe(
(response) => {
this.carGroups = response;
return response;
});
}
openCarGroup(id: number) {
this.router.navigate(['/detail-view', { carGroupId: id }]);
}
onChangePage(pageOfItems: Array<any>) {
// update current page of items
this.pageOfItems = pageOfItems;
}
}
My HTML:
1 <ion-content>
2 <ion-list id="list">
3 <ion-item id="list-item" button *ngFor="let carGroup of carGroups"
4 (click)="openCarGroup(carGroup.id)">
5 <ion-label>{{carGroup.carGroupName}}</ion-label>
6 </ion-item>
7 </ion-list>
8 <div class="card-footer pb-0 pt-3">
9 <jw-pagination [carGroups]="carGroups" (changePage)="onChangePage($event)"></jw-pagination>
10 </div>
</ion-content>
My CSS
.card-footer{
width: 100%;
height: 10%;
position: absolute;
bottom: 10px;
}
I am unfortunately still very inexperienced when it comes to working with ionic and Angular. Currently I get the error:
NG0303: Can't bind to 'carGroups' since it isn't a known property of 'jw-pagination'.
This error comes from my HTML file line 9.
Question 1: How can I fix the error?
Question 2: How do I include Pagination correctly in my component? In my ngOnInit() I will have to integrate Pagination as well or?
Question 3: Currently I get "<jw-pagination [carGroups]="carGroups" (changePage)="onChangePage($event)">"
is not displayed. The div has the desired area at the end of the page but I don't see the PageController there. How can I make it visible?

Answer 1

According to the documentation, you should provide your data as items attribute like so:
<jw-pagination [items]="carGroups" (changePage)="onChangePage($event)"></jw-pagination>
This guide might be helpful.
https://edupala.com/how-to-implement-ionic-table-with-pagination/