CODEWITHSUNDEEP
javascriptangulartypescript
azam
azam

Reputation: 3

animating an item within a list of items, when clicked in angular

I have been trying to animate a single list item when clicked. The animation trigger does not seem to be accessed in the code for the onclick event.

When searching, I came across this solution.

<button mat-flat-button (click)="finishedChore('morning')">
<img [@openClose]="ismorning" src="assets/images/morning.png" />
</button>
<button mat-flat-button (click)="finishedChore('poop')">
<img [@openClose]="ispoop" src="assets/images/poop.png" />
</button>
<button mat-flat-button (click)="finishedChore('cleanRoom')">
<img [@openClose]="iscleanRoom" src="assets/images/cleanRoom.png" />
</button>
<button mat-flat-button (click)="finishedChore('cleanSinks')">
<img [@openClose]="iscleanSinks" src="assets/images/cleanSinks.png" />
</button>
<button mat-flat-button (click)="finishedChore('evening')">
<img [@openClose]="isevening" src="assets/images/evening.png" />
</button>

Here, the creation of Boolean variable for each item to animate seems impossible for a large number of items or if you don't know in advance how much of items will there be.

I want to know if there is any other method for this, or if I can have access to animation trigger in code to control from there?

Upvotes: 0

Views: 47

Answers (1)

Tom
Tom

Reputation: 214

I would pass the event to your onClick function and set the parameters for example as id:

<button mat-flat-button (click)="finishedChore($event)" id="cleanRoom">

Then you can access everything you need for going any further inside of your .ts-file.

finishedChore(event) {
   var target = event.target || event.srcElement || event.currentTarget;
   var id = target.attributes.id;
}

Upvotes: 0

Related Questions