This is a simple example of how to implement client-side pagination in Angular 10.
The example contains a hard coded array of 150 objects split into 15 pages to demonstrate how the pagination component works. Styling in the example is done with bootstrap 4.5 css but you can style any way you like using the provided css classes, details are provided later in the tutorial.
Pagination is implemented with the <jw-pagination>
component that comes with the jw-angular-pagination
package available on npm.
Install the angular pagination component with the command npm install jw-angular-pagination
.
Import the JwPaginationModule
into your app module (app.module.ts
) and add it to the imports
array to make the <jw-pagination>
component available within your Angular module.
This is the app module (app.module.ts
) from the example, the pagination module is imported on line 3
and added to the imports on line 10
.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JwPaginationModule } from 'jw-angular-pagination';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
JwPaginationModule
],
declarations: [
AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
There are 2 required properties for using the Angular 10 pagination component:
changePage
eventThere are also a few optional properties:
This is the app component (/src/app/app.component.ts
) from the example, it creates a hardcoded array of items to be paged in the ngOnInit()
method, and updates the current page of items in the onChangePage()
callback method.
import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app', templateUrl: 'app.component.html' })
export class AppComponent implements OnInit {
items = [];
pageOfItems: Array<any>;
constructor() { }
ngOnInit() {
// an example array of 150 items to be paged
this.items = Array(150).fill(0).map((x, i) => ({ id: (i + 1), name: `Item ${i + 1}`}));
}
onChangePage(pageOfItems: Array<any>) {
// update current page of items
this.pageOfItems = pageOfItems;
}
}
This is the app component template (/src/app/app.component.html
) from the example, it renders the current page of items using the *ngFor
Angular directive on line 5
, and includes the pagination component (<jw-pagination ...>
) on line 8
.
The pagination component is bound to items
property of the app component using the Angular model binding attribute [items]="items"
, and is bound to the onChangePage()
method of the app component using the Angular event binding attribute (changePage)="onChangePage($event)"
.
<!-- main app container -->
<div class="card text-center m-3">
<h3 class="card-header">Angular 10 Pagination Example</h3>
<div class="card-body">
<div *ngFor="let item of pageOfItems">{{item.name}}</div>
</div>
<div class="card-footer pb-0 pt-3">
<jw-pagination [items]="items" (changePage)="onChangePage($event)"></jw-pagination>
</div>
</div>
#angular #javascript #web-development #programming #developer