I currently have a car list that contains a large number of records, and I am looking to implement pagination to enhance the user experience.
Below is my ListViewPageModule where I have imported the JwPaginationModule:
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 {}
Here is my Component setup:
@Component({
selector: 'app-list-view',
templateUrl: './list-view.page.html',
styleUrls: ['./list-view.page.scss'],
})
export class ListViewPage implements OnInit {
structureGroups: StructureGroup[] = [];
lablesHeadlines = labelsHeadlines;
headlines = labelsHeadlines;
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 setup:
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 styles:
.card-footer{
width: 100%;
height: 10%;
position: absolute;
bottom: 10px;
}
Having little experience with Ionic and Angular, I am facing an error message which states:
NG0303: Can't bind to 'carGroups' since it isn't a known property of 'jw-pagination'.
The error originates from line 9 in my HTML file.
Question 1: How can I resolve this error?
Question 2: What is the correct way to include Pagination in my component? Do I need to integrate Pagination within my ngOnInit() as well?
Question 3: Despite adding "<jw-pagination [carGroups]="carGroups" (changePage)="onChangePage($event)">" in my code, the PageController is not displayed. The div occupies the desired space at the end of the page but the PageController is missing. How can I make it visible?