Post
Ask Question

Pagination In Angular 8

Today, we will learn about implementing Custom pagination in Angular 8. Angular 8 was recently released by Google.
 
Prerequisites
  • Basic knowledge of Angular 8
  • Code editor like Visual Studio code
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.


Similar Articles