Pagination in Angular

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 .

Follow us on Shubh Techno Expert