How to animate an image on a click using angular-animations

Question

This animation works when the page loads,But I need to animate this image on a button click

<div [@fadeInDownOnEnter]="'true'">
    <img src="https://www.seoclerk.com/pics/556744-1wYpi51504622425.jpg" alt="animatepic">
</div>
<button (click)="animate()">Animate it</button>

in component.ts file

import { fadeInDownOnEnterAnimation } from 'angular-animations';
@Component({
  animations: [
    fadeInDownOnEnterAnimation()
  ]
})


//method 
animate(){
  //what should I do here
}

Answer 1

in your component ,

    animationWithState = false;
    animate(){
    this.animationState=true;
    this.animationWithState = !this.animationWithState;
    }, 1);

and

<div [@fadeInDownOnEnter]="'true'">

this should be like

<div [@fadeInDownOnEnter]="animationState">

Answer 2

Instead of a static value 'true' in your template, set the value of the [@fadeInDownOnEnter] attribute to a variable that will be referenced from your component like so

<div [@fadeInDownOnEnter]="animationState" >
  <img src="https://www.seoclerk.com/pics/556744-1wYpi51504622425.jpg" alt="animatepic">
</div>
<button (click)="animate()" >Animate it</button>

Then in your component

import {fadeInDownOnEnterAnimation} from 'angular-animations';
@Component({
  animations:[
        fadeInDownOnEnterAnimation()
     ]
})

animationState  = 'true';
//method 
animate(){
    //what should I do here
    this.animationState = this.animationState === 'true' ? 'false' : 'true';
    // the code above will toggle the value of animationState between 'true' and 'false'
    // in order to update the animation

}