Pagination in Angular
To use Pagination NgxPaginationModule need to install
npm install --save ngx-pagination
once this is installed then add this module in app.module.ts and in import array
app.module.ts
import { NgxPaginationModule } from 'ngx-pagination';
imports: [
NgxPaginationModule,
],
app.Component.Html
in HTML we have create a list item in which we will apply pagination .
we have used paginate event to apply this . in ngFor itemsparpage is used to see how many item will be displayed .
<h1>Employee List</h1>
<ul>
<li *ngFor = "let item of EmpListcollection | paginate: { itemsPerPage: 10, currentPage: p } " >
{{item}}
</li>
</ul>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
app.component.ts
in type script file we have created a collection which will be binded in list in HTML component
import { Component, OnInit } from '@angular/core';
import { stringify } from 'querystring';
@Component({
selector: 'app-component',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class appComponent implements OnInit {
EmpListcollection = [];
mystring : string ;
constructor() { }
ngOnInit() {
for (let i =1;i<50;i++)
{
this.mystring = 'Angular';
this.mystring = this.mystring.concat(' Tyepscript ' + i + '.0');
this.EmpListcollection.push(this.mystring)
}
}
}
Output .
