Package Exports

@molecule/pagination

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@molecule/pagination) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Molecule Pagination

The structural molPagination-Directive for Angular implements pagination of your data, but keeps you and your layout flexible. You only need to focus on retrieving all items for your page, an observable indicating when to load the next page and one observable for when to hard-reload all data. Everything else is just your markup!

Example

The following example is fully functional but relies on Ionic as it already implements pull to refresh and infinite scrolling. The molPagination directive will concat each slice of data into a single array of data in the right order.

@Component({
  template: `
  <ion-content>
    <!-- Pull to refresh -->
    <ion-refresher (ionRefresh)="shouldReload($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>


    <!-- Now let's use our directive -->
    <ion-list *molPagination="itemsForPage; let allItems; ifLoading loadingRef; ifEmpty emptyRef; loadNext willLoadNext; hardReload willHardReload">
      <!-- On Success -->
      <!-- We can iterate over all items -->
      <ion-item *ngFor="let item of allItems">
        {{myItem}}
      </ion-item>
    </ion-list>

    <!-- Displayed when loading -->
    <ng-template #loadingRef>
      <ion-spinner></ion-spinner>
    </ng-template>

    <!-- Displayed when there are no items at all -->
    <ng-template #emptyRef>
      Zero items
    </ng-template>

    <!-- Infinite scroll -->
    <ion-infinite-scroll (ionInfinite)="shouldLoadNext($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>
  `
})
@IonicPage()
export class MyItemsPage {
  public readonly willHardReload = new Subject<void>();
  public readonly willLoadNext = new Subject<void>();
  private latestSender = () => void 0;

  public get itemsForPage(): PageLoader<string> {
    return (index, wasForced) => Observable.of([
      `Values for page with index ${index} as array.`,
      `If reload was forced, load from Http, otherwise from cache: ${wasForced}.`
    ])
      .finally(() => this.latestSender()); // stop reload animation
  }

  public shouldReload(sender?: { complete: () => void }): void {
    // store completion handler
    this.latestSender = () => sender && sender.complete();
    // emit hard reload event for pagination
    this.willHardReload.next(void 0);
  }

  public shouldLoadNext(sender?: { complete: () => void }): void {
    // store completion handler
    this.latestSender = () => sender && sender.complete();
    // emit request next page
    this.willLoadNext.next(void 0);
  }
}

Installation

$ npm install --save @molecule/pagination

Author

Valentin Knabel, @vknabel, dev@vknabel.com

License

@molecule/pagination is available under the MIT license.