[v4] infinite-scroll is not working when calling complete()

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/home/poi/.config/yarn/global/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.5
   ionic (Ionic CLI) : 4.0.0-rc.5

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.0
   @ionic/schematics-angular  : 1.0.0-rc.5
   Ionic Framework            : @ionic/angular 4.0.0-alpha.4

System:

   NodeJS : v9.11.1
   npm    : not installed
   OS     : Linux 4.16

Describe the Bug In my case, I’m not doing some async operations, I just don’t want to show too many items at once, so I use the infinite scroll. But I got such error when I trying to finish it:

core.js:1601 ERROR TypeError: infiniteScroll.complete is not a function
    at contract.page.ts:24
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4062)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496)
    at ZoneTask.invoke (zone.js:485)
    at timer (zone.js:2054)

Steps to Reproduce Steps to reproduce the behavior: See my code below.

Related Code

  limit = 10;

  data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

  doInfinite(infiniteScroll) {
    this.limit += 5;
    infiniteScroll.complete();
  }

  <ion-list no-lines>
    <ion-item *ngFor="let item of data | slice:0:limit">
      <ion-label color="primary">{{item}}</ion-label>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

Expected Behavior No error occurs.

Additional Context List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[mhartington]

Hi there! So this is a change in the kind of events that are emitted in V4. In v3 we were emitting synthetic Angular events, but in V4 we’re emitted HTML events, meaning you need to access the complete method from the event target. The correct way to handle this now is with

 doInfinite(infiniteScrollEvent) {
    this.limit += 5;
    infiniteScrollEvent.target.complete();
  }

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.