@yci/paginator
Installation
- Install the Ionic plugin
npm i -S @yci/paginator
- 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
items: any[];
page: number;
pages: number;
total: number;
@Input() params: PaginatorParams;
@Output() onData: EventEmitter<PaginatorData>;
@Output() onClear: EventEmitter<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