Infinite-scroll doen't fire inside a custom component

Ionic Framework ionic-v3
1

I’m trying to use an infinite-scroll item in a custom component that contains a segement with two Lists.
This is the code of the component :

<ion-content *ngIf="show">
  <ion-refresher (ionRefresh)="doRefresh($event)" (ionPull)="doPulling($event)">
    <ion-refresher-content
      pullingText="{{'PULL_TO_REFRESH'|translate}}"
      refreshingText="{{'REFRESHING'|translate}}">
    </ion-refresher-content>
  </ion-refresher>

  <div no-margin no-padding style="color: rgba(25,94,97,0.98)" >
    <ion-segment style="color: rgba(25,94,97,0.98)" [(ngModel)]="chx">
      <ion-segment-button style="color: rgba(25,94,97,0.98)" value="most">
        MOST TRUSTED
      </ion-segment-button>
      <ion-segment-button style="color: rgba(25,94,97,0.98)" value="recent">
        LATEST
      </ion-segment-button>
    </ion-segment>
  </div>

  <div no-margin no-padding [ngSwitch]="chx">
    <ion-list  no-margin no-padding *ngSwitchCase="'most'">

      <post-card-most no-margin *ngFor="let post of mostTrusted" [post]="post"> </post-card-most>
      <ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollmost" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>

      <ion-infinite-scroll  (ionInfinite)="doInfinite2($event)" threshold="100px">
        <ion-infinite-scroll-content
          loadingSpinner="{{'BUBBLES' | translate}}"
          loadingText="{{'LOADING' | translate}}">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

    </ion-list>


    <ion-list no-margin no-padding  *ngSwitchCase="'recent'">

      <page-post-card no-margin  *ngFor="let post of latestTrusted" [post]="post" [isNotif]=false [home]=false>
      </page-post-card>

      <ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollrecent" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>

      <ion-infinite-scroll  (ionInfinite)="doInfinite($event)" threshold="100px">
        <ion-infinite-scroll-content
          loadingSpinner="{{'BUBBLES' | translate}}"
          loadingText="{{'LOADING' | translate}}">
        </ion-infinite-scroll-content>

      </ion-infinite-scroll>
    </ion-list>

  </div>
</ion-content>

The component is used in an ionic page like this:

<ion-content no-padding>

  <topicsearch [show]="showresult"></topicsearch>   <!-- This is the custom component -->

  <div *ngIf="!showresult" >
  <ion-list  *ngFor="let top of topics">
    <ion-item (click)="topicsearchselected(top.label)" > {{top?.label}}</ion-item>
  </ion-list>
  </div>

</ion-content>

The problem is that the infinite-scroll doesn’t fire when scrolling down in the custom component.
Does anyone have a solution for that ?