Custom Pagination In Angular

The Code Points September 04, 2022 0

In this article, we will learn how to use custom pagination feature in Angular application. pagination to use divide number of table rows into multiple table pages so user is perspective view easily used and searching the records.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new angular-custom-pagination

Now, we need to install the jw-angular-pagination npm package using the following command in the terminal.

npm install jw-angular-pagination

Now, add the JwPaginationComponent module in the app.module.ts file using the following code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { JwPaginationComponent } from 'jw-angular-pagination';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    JwPaginationComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, using the following code we need to add bootstrap and jquery reference into the index.html file.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CustomPaginationAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Now, add the following code under the app.component.ts file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'custom-pagination-angular';
  data = [];
  pagedItems: Array<any>;

  constructor() { }

  ngOnInit() {
    this.data = Array(1000).fill(0).map((x, i) => ({ id: (i + 1), name: `Item Paged ${i + 1}`, product: `Product ${i + 1}` }));
  }
  beginPagination(pagedItems: Array<any>) {
    this.pagedItems = pagedItems;
  }
}

Now, add the following code under the app.component.html file.

<div class="card text-center m-3">
  <h3 class="card-header">Angular 8 Custom Pagination Example</h3>
  <div class="card-body">
      <div *ngFor="let item of pagedItems">{{item.name}} for {{item.product}}</div>
  </div>
  <div class="card-footer pb-0 pt-3">
      <jw-pagination [items]="data" (changePage)="beginPagination($event)"></jw-pagination>
  </div>
</div>

Now, run the application using the ng serve command into the terminal and see the browser screen we are able to use pagination and travers on to the specific page or previous or next page.

Conclusion

In this article, we learned how to use custom pagination feature in Angular application using the jw-angular-pagination package.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.

Custom Pagination In Angular

Custom Pagination In Angular

Conclusion

Post a Comment