ngFor with Hammer JS swipe function in Angular 7

Question

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

Eliseo Eliseo · Accepted Answer · 2020-08-17T09:23:49

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

ngFor with Hammer JS swipe function in Angular 7

1 Answers