While using Hammer js swipe function with *ngFor in angular.The result expected was a swipe for particular index of tile and that tile will be removed. But by doing that the animation is not working now. the code which i have done is in below link:
https://stackblitz.com/edit/angular-animations-lib-demo-ahykzr?file=src%2Fapp%2Fapp.component.html
Arjun, you use an unique variable to control the animations, that's for all the div you has
[@cardAnimator]="animationState"
So, when change the variable all the div are animated.
You need use an array of variables
declare animationState as an array of strings
animationState: string[]=[];
En startAnimation and resetAnimation use the array
startAnimation(state,index) {
console.log(state)
console.log(index)
this.asd = index;
if (!this.animationState[index]) {
this.animationState[index] = state;
}
}
resetAnimationState(index) {
this.animationState[index] = '';
}
And in .html use also the array
[@cardAnimator]="animationState[i]"
(@cardAnimator.done)="resetAnimationState(i)"
See in your forked stackblitz
Update I change cardAnimator.done to pass as argument the index, so I can forget the "ugly" asd
variable