Ionic firebase infinite scroll

Ionic Framework ionic-v3
1

I’m trying to do an ion-infinite-scroll with a Firebase

Capture%20d%E2%80%99%C3%A9cran%20(23)
Capture d’écran (23).png1284×335 28.3 KB

this is my database

<ion-item-sliding *ngFor="let item of todoFs; let i = index; let c = count">
          <ion-card class="welcome-card" >
            <ion-card-title>{{ item.title }}</ion-card-title>
            <ion-card-subtitle color="primary">{{ item.time | date:'short'}}</ion-card-subtitle>     
            <ion-card-content>
              {{ item.message }}
            </ion-card-content> 
          </ion-card>
    </ion-item-sliding>

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

this is my home.page.html

export class FuneralPage implements OnInit {

  @ViewChild ( IonInfiniteScroll, { static: true }) infiniteScroll: IonInfiniteScroll;
  todoFs: TodoF[];
  conteur = 5;
  item = [] ;

  constructor(private todoFService: TodoFService) { }

  ngOnInit() {
    this.todoFService.getTodoFs().subscribe(res => {
      this.todoFs = res;
    });
  }

  addMoreItems() {
    for (let i = 0; i < 5; i++) {
      this.item.push('a');
    }
    this.conteur += 5;
  }

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      this.addMoreItems();
      this.conteur -= 1;
      event.target.complete();
    }, 500);
  }

this is my home.page.ts

constructor(db: AngularFirestore) {
    this.todoFsCollection = db.collection<TodoF>('todoFs');

    this.todoFs = this.todoFsCollection.snapshotChanges().pipe(
      map(actions => {
        return actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
      })
    );
   }

   getTodoFs() {
     return this.todoFs;
   }

   getTodoF(id) {
     return this.todoFsCollection.doc<TodoF>(id).valueChanges();
   }

this is my todo-f.services.ts

my problem: I want the resent10 first data to be display on my screen and after scroll the other 10 displays but in my case, all the data is on my screen when I run my code.