Today, we will learn about implementing Custom pagination in Angular 8. As Angular 8 is officially released by Google.
Prerequisites:
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.
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
View Comments
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