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

Issue

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?

Solution

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/

Answered By - user796446