0.0.3 • Published 2 years ago

esnpage v0.0.3

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

Angular 14 - Paginated Data for ngFor loop

------------------DEMO--------------------

https://angular-ivy-jzqxke.stackblitz.io/

https://stackblitz.com/edit/angular-esnpage

------------------INSTALLATION--------------------

npm i esnpage --force

import { EsnpageModule } from esnpage

------------------USAGE--------------------

---------Template html file

<div *ngFor="let i of data|pager:pageNumber:2">
   .
   .
   .
</div>


<esnpage 
    [dataLength]="data.length" //Length ofyour data
    [itemPerPage]="2" //Item Per Page
    [pageNumber]="pageNumber" //Current page number
    (pageChanged)="pageNumber=$event">
</esnpage>

---------ts file

  pageNumber=1;
  
   data = [
    {
      name: 'Germany'
    },
    {
      name: 'Usa'
    },
    {
      name: 'England'
    },
    {
      name: 'Sweden'
    },
    {
      name: 'UAE'
    },
    {
      name: 'Ukraine'
    },
    {
      name: 'Korea'
    },
    {
      name: 'Japan'
    },
    {
      name: 'Argentina'
    },
  ]