Ionic 2 Infinite Scroll event never fires

Question

I'm trying to use ionic's infinite scroll. However, no matter what I do I can't get this working. Also, there example makes no sense to me what so ever.

I have this page I'm using to import messages:

<astoot-layout [pageName]="pageName" [basePage]="this">
  <ion-content padding-horizontal padding class="messages-page-content">
    <!--<ion-scroll scrollY="true" class="messages">-->
    <ion-list>
      <ion-item *ngFor="let message of messages">
        <!--<div *ngFor="let message of messages" class="day-wrapper">-->
          <div [class]="'message message-' + getOwnerClassPrefix(message.senderUserId)">
            <div class="message-content message-content-text">{{message.messageText}}</div>
            <span class="message-timestamp">{{ getCreated(message.created) }}</span>
          </div>
        <!--</div>-->
      </ion-item>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="pullPage($event)">
      <ion-infinite-scroll-content>
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
    <!--</ion-scroll>-->
  </ion-content>
  <ion-footer>
    <ion-toolbar color="whatsapp" class="messages-page-footer" position="bottom">
      <ion-input [(ngModel)]="messageText" class="message-editor" placeholder="Type a message"></ion-input>

      <ion-buttons end>
        <button ion-button icon-only *ngIf="messageText" class="message-editor-button" (click)="sendTextMessage()">
          <ion-icon name="send"></ion-icon>
        </button>

        <button ion-button icon-only *ngIf="!messageText" class="message-editor-button">
          <ion-icon name="mic"></ion-icon>
        </button>
      </ion-buttons>
    </ion-toolbar>
  </ion-footer>

</astoot-layout>

This is my pullPage Method which is never called:

pullPage(infiniteScroll: any) {
    //TODO Get nextPage
    setTimeout(() => {
      this.baseProvider.getList(this.filterByConversationId).subscribe(entities => {
          this.messages.concat(entities);
          infiniteScroll.complete();
      });
    }, 500);
}

just incase its needed here is my layout component:

<ion-header>
  <ion-navbar align-title="center">
      <button ion-button icon-only menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title> {{pageName}} </ion-title>
    <ion-buttons end>
      <button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
        <ion-icon name="create"></ion-icon>
        &nbsp;Edit
      </button>
      <button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Save
      </button>
      <button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Cancel
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ng-content>
</ng-content>

I'm generally confused on how ion-infinite-scroll even works how does it know when to signal, is it just based on the closest list above it?

How can I get the infinite scroll event to fired?

Answer 1

For anyone who is encountering something similar, the problem is an open issue with ionic caused by the nested ion-content, Luckily in my case I could remove it

My messages page now call the component with out wrapping the content:

<astoot-layout [pageName]="pageName" [basePage]="this"></astoot-layout>

My layout page now looks like this:

<ion-header>
  <ion-navbar align-title="center">
      <button ion-button icon-only menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    <ion-title> {{pageName}} </ion-title>
    <ion-buttons end>
      <button [hidden]="!editOptions || editOptions.isEditing" (click)="toggleEdit()" ion-button>
        <ion-icon name="create"></ion-icon>
        &nbsp;Edit
      </button>
      <button [hidden]="!editOptions || !editOptions.isEditing" class="success" (click)="save()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Save
      </button>
      <button [hidden]="!editOptions || !editOptions.isEditing" class="warn" (click)="toggleEdit()" ion-button>
        <ion-icon name="save"></ion-icon>
        &nbsp;Cancel
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>