Today, we will learn about implementing Custom pagination in Angular 8. Angular 8 was recently released by Google.
Prerequisites
So, let's get started.
Create a new project in Angular 8 by typing the following command.
  1. ng new custom-pagination-angular
Now, open the newly created project and install the jw-pagination package. It provides good control over pagination.
  1. npm install jw-angular-pagination
Open the app.module.ts file and add the JwPaginationComponent in the file.
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { JwPaginationComponent } from 'jw-angular-pagination';
  4. import { AppComponent } from './app.component';
  5. @NgModule({
  6. declarations: [
  7. AppComponent,
  8. JwPaginationComponent
  9. ],
  10. imports: [
  11. BrowserModule
  12. ],
  13. providers: [],
  14. bootstrap: [AppComponent]
  15. })
  16. export class AppModule { }
Open the app.component.ts file and add the code in it.
  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'app-root',
  4. templateUrl: './app.component.html',
  5. styleUrls: ['./app.component.css']
  6. })
  7. export class AppComponent {
  8. title = 'custom-pagination-angular';
  9. data = [];
  10. pagedItems: Array<any>;
  11. constructor() { }
  12. ngOnInit() {
  13. this.data = Array(1000).fill(0).map((x, i) => ({ id: (i + 1), name: `Item Paged ${i + 1}`, product: `Product ${i + 1}` }));
  14. }
  15. beginPagination(pagedItems: Array<any>) {
  16. this.pagedItems = pagedItems;
  17. }
  18. }
Open the app.component.html file and add the HTML in it.
  1. <div class="card text-center m-3">
  2. <h3 class="card-header">Angular 8 Custom Pagination Example</h3>
  3. <div class="card-body">
  4. <div *ngFor="let item of pagedItems">{{item.name}} for {{item.product}}</div>
  5. </div>
  6. <div class="card-footer pb-0 pt-3">
  7. <jw-pagination [items]="data" (changePage)="beginPagination($event)"></jw-pagination>
  8. </div>
  9. </div>
You can also add the bootstrap and jQuery reference in it.
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CustomPaginationAngular</title>
  6. <base href="/">
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <link rel="icon" type="image/x-icon" href="favicon.ico">
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  10. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  12. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  13. </head>
  14. <body>
  15. <app-root></app-root>
  16. </body>
  17. </html>
That’s it.
Pagination In Angular 8
I hope you guys found something useful. Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.