Today, we will learn about implementing Custom pagination in Angular 8. As Angular 8 is officially released by Google.
Prerequisites:
- Basic knowledge of Angular 8
- Code editor like Visual studio code
So, lets get started:
Create a new project in angular 8 by typing the following command.
ng new custom-pagination-angular
Now, open the newly created project and install the jw-pagination package. It provides good control over pagination.
npm install jw-angular-pagination
Open the app.module.ts file and add the JwPaginationComponent in the file.
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 { }
Open the app.component.ts file and add the code in it.
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;
}
}
Open the app.component.html file and add the html in it.
<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>
You can also add the bootstrap and jquery reference in it.
<!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>
That’s it.
hi plz add more info about how to do more custome
This function is work as it suppose to be.
Requesting the @Faisal Pathan to check, verify and modify it that it is use for one anyone in need
HI,
while i try to run your code. It show the following error:
Error: Angular JIT compilation failed: ‘@angular/compiler’ not loaded!
– JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
– Did you bootstrap using ‘@angular/platform-browser-dynamic’ or ‘@angular/platform-server’?
– Alternatively provide the compiler with ‘import “@angular/compiler”;’ before bootstrapping.
[In console Log]
Also the also it show that the JwPaginationComponent is not a part of the of the component.
Please check the issue with this example.
Thanks
Hey there! Would you mind if I share your blog with my myspace group? There’s a lot of folks that I think would really appreciate your content. Please let me know. Cheers