Have ideas to improve npm?Join in the discussion! »

@yci/paginatorTypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

Build Status Coverage Status MIT license

@yci/paginator

Installation

  1. Install the Ionic plugin
 npm i -S @yci/paginator
  1. Add it to your app’s NgModule.
// Import your library
import { PaginatorModule } from '@yci/paginator';
 
@NgModule({
 
  ...
 
  imports[
 
    ...
 
    // Specify your library as an import
    PaginatorModule.forRoot()
  ],
  
  ...
 
})
export class AppModule { }

Usage

Once your library is imported, you can use its component in your Angular application:

import { PaginatorParams } from '@yci/paginator'
 
@Component({
  ...
})
export class XXXPage {
  params: PaginatorParams = {
    autoLoad: true,
    url: 'xxx',
    map: x => x.json()
  }
}
<yci-paginator #paginator [params]="params">
  <ion-list>
    <ion-list-header>{{ paginator.total }} records in {{ paginator.pages }} pages</ion-list-header>
    <ion-item *ngFor="let item of paginator.items">
      <ion-icon name="ionic" item-left></ion-icon>
      {{ item.name }}
    </ion-item>
  </ion-list>
</yci-paginator>

Working with ionic refresher and infinite scroll

 
  <ion-refresher (ionRefresh)="paginator.refresh($event)">
    <ion-refresher-content pullingText="pull to refresh">
    </ion-refresher-content>
  </ion-refresher>
 
  <yci-paginator #paginator [params]="params">
    <ion-list>
      <ion-list-header>{{ paginator.total }} records in {{ paginator.pages }} pages</ion-list-header>
      <ion-item *ngFor="let item of paginator.items">
        <ion-icon name="ionic" item-left></ion-icon>
        {{ item.name }}
      </ion-item>
    </ion-list>
  </yci-paginator>
 
  <ion-infinite-scroll *ngIf="paginator.items.length" (ionInfinite)="paginator.next($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

Instance methods and properties

itemsany[];
pagenumber;
pagesnumber;
totalnumber;
@Input() paramsPaginatorParams;
@Output() onDataEventEmitter<PaginatorData>;
@Output() onClearEventEmitter<void>;
 
next(infiniteScroll?: InfiniteScroll)Promise<any[]>;
clear()void;
refresh(refresher?: Refresher)Promise<void>;
 

Interfaces

interface PaginatorData {
  total: number;
  limit: number;
  offset: number;
  page: number;
  pages: number;
  docs: any[];
}
 
interface PaginatorParams {
  url: string;
  map: (x: Response) => Promise<PaginatorData>;
  autoLoad?: boolean;
  headers?: any;
  options?: PaginatorParamsOptions;
  filters?: any;
}
 
interface PaginatorParamsOptions {
  sort?: any;
  select?: any;
  populate?: PaginatorParamsPopulate | string | Array<PaginatorParamsPopulate>;
  lean?: any;
  leanWithId?: any;
  limit?: number;
}
 
interface PaginatorParamsPopulate {
  path: string;
  match?: any;
  select?: string;
  options?: any;
  populate?: PaginatorParamsPopulate | string | Array<PaginatorParamsPopulate>;
}

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

License

MIT © Yu Chen

Keywords

Install

npm i @yci/paginator

DownloadsWeekly Downloads

2

Version

1.0.2

License

MIT

Unpacked Size

24 kB

Total Files

8

Last publish

Collaborators

  • avatar