angularhammer.jshammer

ngFor with Hammer JS swipe function in Angular 7


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


Solution

  • 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