A structural directive for pagination in Ionic and Angular.


100.4.03 years ago5 years agoMinified + gzip package size for @molecule/pagination in KB


Molecule Pagination

CircleCI Codecov npm (scoped)

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!


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.

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

    <!-- 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">

    <!-- Displayed when loading -->
    <ng-template #loadingRef>

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

    <!-- Infinite scroll -->
    <ion-infinite-scroll (ionInfinite)="shouldLoadNext($event)">
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);


$ npm install --save @molecule/pagination


Valentin Knabel, @vknabel, dev@vknabel.com


@molecule/pagination is available under the MIT license.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.