How do I add a new Item in @ViewChildren list by making api call?

Question

I am sorry if I didn't describe my problem in question.

I am learning gesture api in Ionic 5 app from this video and I so far did and understood what was explained. However I want to add more item in people list by making a call to api which will send me some data but I am failing to do so.

The API is https://randomuser.me/api/

I have tried to push element in array but the swipe gesture wont' work like the first three cards.

this is my code in .ts file

import { HttpClient } from '@angular/common/http';
import { AfterViewInit, Component, ElementRef, NgZone,  QueryList, Renderer2, ViewChildren } from '@angular/core';
import {  GestureController, IonCard,Gesture, Platform } from '@ionic/angular';

@Component({
  selector: 'app-userhome',
  templateUrl: './userhome.page.html',
  styleUrls: ['./userhome.page.scss'],
})
export class UserhomePage implements AfterViewInit {

dt:any;
new:any;

@ViewChildren(IonCard,{read:ElementRef}) cards:QueryList<any>;

longPressActive:Boolean;

  people = [
    {
      name:{
           first:'Random Name'
      },
      img:'https://picsum.photos/200',
      email:'[email protected]'
    },
    {
      name:{
        first:'Cool Name'
      },
      img:'https://picsum.photos/200',
      email:'[email protected]'
    },
    {
      name:{
        first:'Name'
      },
      img:'https://picsum.photos/200',
      email:'[email protected]'
    }
  ];

  

  constructor(public http:HttpClient,private gestureCtrl: GestureController, private ngZone:NgZone,public renderer:Renderer2, private plt :Platform) { }
  
  async ngAfterViewInit(){
    const cardArray = this.cards.toArray();
    console.log(cardArray);
    
    this.useTinderSwipe(cardArray);
  }

  useTinderSwipe(cardArray){
    for(let i=0;i<cardArray.length;i++){
      const card = cardArray[i];
      console.log('card: ',card);
      const gesture: Gesture = this.gestureCtrl.create({
        el: card.nativeElement,
        threshold: 15,
        gestureName: 'siwpe',
        onStart:ev=>{
          
        },
        onMove:ev=>{
          card.nativeElement.style.transform = `translateX(${ev.deltaX}px) rotate(${ev.deltaX/10}deg)`;
          
        },
        onEnd:ev=>{
         
          card.nativeElement.style.transform = ' 3.5s ease-out';
          if(ev.deltaX > 150){
            card.nativeElement.style.transform = `translate(${+this.plt.width()*2}px) rotate(${ev.deltaX/2}deg)`;
this.http.get('https://randomuser.me/api/').subscribe(res=>{
      this.dt = res;
      this.new = this.dt.results[0];
      this.people.push(this.new);
      console.log(this.dt.results[0]);
    })
          }else if(ev.deltaX < -150){
            card.nativeElement.style.transform = `translate(-${+this.plt.width()*2}px) rotate(${ev.deltaX/2}deg)`;
          }else {
            card.nativeElement.style.transform = '';
          }
        }
      }, true);
      gesture.enable(true);
    }
  }

  

}

and this is in my html file

<ion-header>
  <ion-toolbar>
    <ion-title>User Home Page</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  
  <ion-card  *ngFor =" let  p of people"  >
   
    <ion-card-header>
      <ion-card-title>{{p.name.first}}</ion-card-title>
      <ion-card-subtitle>Power: {{p.email}}</ion-card-subtitle>
    </ion-card-header>
  </ion-card>
  
  
</ion-content>

Is there any way I can update people list and add new items everytime a card is moved out of the screen?