Hey there!
I'm currently facing an issue with my ionic app. I added the ion-gesture to my project, but due to the ngFor loop pulling data from Firebase, the cards are unable to move.
Here's a snippet of my code:
<ion-card *ngFor="let postscall2 of postcall2" >
<img class="profilePic"src="https://ucarecdn.com/{{ postscall2.profilePic }}/-/scale_crop/200x200/center/"/>
<ion-img (click)="open(postscall2)"src="https://ucarecdn.com/{{postscall2.postboost2ID}}/-/preview/{{postscall2.effect}}"></ion-img>
</ion-card>
And here is the TypeScript part:
import { Component, ElementRef, OnInit, QueryList, AfterViewInit, ViewChildren }from'@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from "@angular/fire/firestore";
import { AngularFireFunctions} from '@angular/fire/functions'
import { firestore } from 'firebase/app';
import * as firebase from 'firebase/app';
import { IonCard } from '@ionic/angular'
@Component({
selector: 'app-feed',
templateUrl: './feed.page.html',
styleUrls: ['./feed.page.scss'],
})
export class FeedPage implements OnInit, AfterViewInit {
@ViewChildren(IonCard, { read: ElementRef }) cards: QueryList<ElementRef>;
sub
postcall
constructor(
private aff:AngularFireFunctions,
public afstore: AngularFirestore,
private afs: AngularFirestore,
private gestureCtrl: GestureController,
) {}
ngOnDestroy() {
this.sub.unsubscribe()
}
ngOnInit() {
const postcall2 = this.aff.httpsCallable('postscall2')
this.sub = postcall2({}).subscribe(data =>{
this.postcall2 = data
console.log("postcall2");
console.log(this.postcall2);
} )
ngAfterViewInit(){
const cardArray = this.cards.toArray()
this.useLonpress(cardArray)
}
useTinderSwipe(cardArray) {
for (let i = 0; i < cardArray.length; i++){
const card = cardArray[i];
console.log('card', card)
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 = '3.5 ease-out';
if(ev.deltaX > 175){
card.nativeElement.style.transform = '';
console.log("do something")
this.presentToast()
}else if (ev.deltaX < -175) {
card.nativeElement.style.transform = '';
console.log("do something else")
this.presentToast1()
}else{
card.nativeElement.style.transform = '';
}
}
});
gesture.enable(true)
}
}
}
If you have any insights on how to resolve this issue, please share. Don't forget to upvote so others can benefit from it as well. Thank you in advance!