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

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?

Continue reading...