ionInfinite event of infinite-scroll does not fire

Ionic Framework ionic-v3
1

hi,
i’m using ion-infinite-scroll to load more records when scrolling to the bottom of the page. however, the ionInfinite event does not fire.
the code is attached below.
what am i doing wrong?

 <ion-content style="overflow-y: auto;">
 <ion-list [style.direction]="direction">
     <ion-item  *ngFor="let item of selectedEntItems | objToIterable;let ind=index">
         <!--List item header-->
         <ion-card-header  *ngFor="let column of columns | objToIterable"  (click)="ListItemClick(item,ind)"  [ngClass]="{'hide': notHeaderColumn(item,column) ,'ListItemHeader':true}" >
               <span>
                 {{ column.title + ': ' + getVal(item,column)}}
               </span>
               <span >,</span>
         </ion-card-header>

         <!--List item content-->
         <ion-card-content *ngFor="let column of columns | objToIterable" (click)="ListItemClick(item,ind)" [ngClass]="{'hide': notBodyColumn(item,column) }">
            <p> {{column.title + ': ' + getVal(item,column)}}</p>
         </ion-card-content>
         <ion-icon name="close" (click)="deleteRow(item,ind)" class="listDelete"></ion-icon>
     </ion-item>
 </ion-list>

 <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
     <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="Loading more data...">
     </ion-infinite-scroll-content>
 </ion-infinite-scroll>

 </ion-content>

and on ts file the definition of doInfinite:

 doInfinite(infiniteScroll) {
             console.log('Begin async operation');
             alert("infiniteScroll");
             infiniteScroll.complete();
         }
2

the code does not seem to be attached properly.
trying once again:

<ion-content style="overflow-y: auto;">
<ion-list [style.direction]="direction">
    <ion-item  *ngFor="let item of selectedEntItems | objToIterable;let ind=index">
    item text
    </ion-item>
</ion-list>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>
3

Here is a small example on setting up infinite scroll