Working with Pagination when using Ajax in Angular

 Splitting bulk amount of data into smaller blocks is called "pagination | paging",

this blocks are called pages, only one page records will be shown to the user at a time

Page index will start with 0

 collection -->pagesize-10---> page1-10 recs[0] ----> only single page recs 

display[10 recs]
  [100 recs]                   page2-10 recs[1]           <  <<  >>  >[navigation buttons]
                                      ...
                                     page9-10 recs[9]

Paging can be implemented in angular using ngx-pagination package, this is
 providing ngxpaginationmodule with a pipe and component
 

1.paginate pipe--this will split a collection into pages using items Per Page property, it will display page records based on currentPage property

 2.pagination-controls component--this will provide navigation buttons to
                                  provide navigation between pages

Goto terminal to install ngx-pagination package
 
npm i ngx-pagination

For this example, i am going to use the below url 


http://dummy.restapiexample.com/api/v1/employees












Goto 

https://jsonviewer.stack.hu/































create a component to display employees data getting from restapi available


ng g c employees --flat

Employee.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './employees.component.html',
  styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
  res:any;
  pagenumb:number=0;
  constructor(private _httpclient:HttpClient) 
  {
   this._httpclient.get("http://dummy.restapiexample.com/api/v1/employees").subscribe(
     (response:any)=>{
       this.res=response;
     }
   );
  }
 m1(pagenumb1:number)
  {
    this.pagenumb=pagenumb1;
  }
  ngOnInit(): void {
    throw new Error('Method not implemented.');
  }
}

.html

<h1> Employee Data</h1>
<table style="font-size:x-large" border="1">
    <tr>
        <th>name</th>
        <th>salary</th>
        <th>age</th>
    </tr>
    <tr *ngFor="let e of res.data |paginate:{itemsPerPage:10,currentPage:pagenumb}">
      <td>
          {{e.employee_name}}
      </td>
      <td>
       {{e.employee_salary}}
   </td>
   <td>
       {{e.employee_age}}
   </td>
    </tr>
    <tr>
        <td colspan="3" style="text-align: center;">
         <pagination-controls (pageChange)="m1($event)"></pagination-controls>
       </td>
    </tr>
   </table>

appModule.ts

import{NgxPaginationModule} from "ngx-pagination";
import{HttpClientModule} from "@angular/common/http";

@NgModule({
     ...
  imports:[...,NgxPaginationModule,HttpClientModule],
 bootstrap:[EmployeesComponent]
        })


Output


























Note:

In case  , if you are getting CORS Error, then use chrome browser and go to the installed path
and type the below command

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Second Approach to fix that issue ,is to fix CORS Error


https://www.stackhawk.com/blog/angular-cors-guide-examples-and-how-to-enable-it/



initial pagenumb is 0,so currentpage prop is set with 0,so paginate pipe
 will display 1st page recs

*navigation button click[next|prev] will call pageChange event method m1,$event
 keyword will provide page numb based on navigation button click, this will be
 be assigned pagenumb variable, accordingly current page will change to display
 page recs