ionic gesture stops working when adding data from API calls, maybe lifecycle issue? ( angular )

I am trying to implement a tinder-like swipe on ionic/angular - ion-card in html with ngFor, and viewchild + gesture create in page.ts.

I manage to have it work for data that I do hardcode in the page.ts, but when I try to fetch data from db via API calls, then it does not work anymore. I tried what I would typically do which is to load the result of my API call to the variable that I use in my ngFor - but doing so the content on ion-card gets "undefined" I tried by pushing the received content in an pre-initiated variable (basically adding to the hardcoded variable), this works as I can see the new content on cards BUT when I reach the card for that new content (by swiping the cards before), the gesture is NOT working on it anymore, basically get stuck...

Any help please?

Here is my code extract :

HTML part:

<ion-content class="ion-padding">


<ion-card *ngFor="let q of itemListData; let index=index" [ngStyle]="{ zIndex: Questions.length - 5 - index, transform: 'scale(' + (20 - index) / 20 + ') translateY(-' + 20 * index + 'px)' }">
<ion-card-header>
<div class="progress"></div>
</ion-card-header>
<ion-card-content>
<div class="inner-wrap">
<p>
Question of {{q.profileName}}<br>{{q.countRespondants}} respondants
</p>
<h2>
{{q.text}}
</h2>
</div>
</ion-card-content>
</ion-card>

</ion-content>


Page.ts:

import { AfterViewInit, Component, ElementRef, NgZone, OnInit, QueryList, ViewChildren } from '@angular/core';
import { Gesture, GestureController, IonCard, Platform } from '@ionic/angular';
import { HttpConfigService } from '../services/http-config.service';
import { PollsList } from '../models/pollsList';
import { AuthService } from '../auth/auth.service';
import { Router } from "@angular/router";
import { AlertController } from '@ionic/angular';
import { connectableObservableDescriptor } from 'rxjs/internal/observable/ConnectableObservable';
import { ThrowStmt } from '@angular/compiler';

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

itemListData : PollsList[];
itemListFollowsData = [];
scrollLength = 0;
page_number = 1;
page_limit = 30;
searchContent: string ="*";
user = [];
url: any;


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


constructor(private gestureCtrl: GestureController,
private zone : NgZone,
private platform: Platform,
private httpConfigService: HttpConfigService,
public modalController: ModalController,
public alertController: AlertController,
private authService: AuthService,
private router: Router) {

this.itemListData = [];
this.page_number=0;
}

ngOnInit() {
}

ionViewWillEnter () {

this.pollInit();

}

ngAfterViewInit() {

const cardArray = this.cards.toArray();
this.setGesture(cardArray);

}

setGesture(cards) {

for (let c = 0; c < cards.length; c++) {

const card = cards[c];

const gesture = this.gestureCtrl.create({
el: card.nativeElement,
gestureName: 'swipe',
onStart: ev => {

},
onMove: ev => {
card.nativeElement.style.transform = `translateX(${ev.deltaX}px) rotate(${ev.deltaX / 10}deg)`;
},
onEnd: ev => {
card.nativeElement.style.transition = '.2s ease-out';
if (ev.deltaX > this.platform.width() / 2.25) {

card.nativeElement.style.transform = `translateX(${this.platform.width() * 3}px) rotate(${ev.startX / 2}deg)`;

} else if (ev.deltaX < -this.platform.width() / 2.25) {
card.nativeElement.style.transform = `translateX(-${this.platform.width() * 3}px) rotate(${ev.startX / 2}deg)`;

} else {
card.nativeElement.style.transform = '';
}

}
});

gesture.enable(true);

}

}

pollInit(){
this.url = '?pollText=a&offset=' + this.page_number + '&limit=5';
const temporary = this.httpConfigService.getListItemsAwait
for (let i = 0; i < temporary.length; i++) {
this.itemListData.push(temporary);
}
this.page_number = this.page_number+5
}

}

Continue reading...