How do I flip a card in a list of cards (Angular)

Issue

I hope you have a good day.
I just want when I click on a card and that card will flip.
But the problem is when I click on one card the all cards flip.

HTML
1

TypeScript

2

Solution

You put your .state property on the data array itself. I believe you wanted to store this state per card, but by storing it as a property of the array, then you only have one of them for all the cards.

I propose some changes to your code:

  • You can pass the index inside your cardClicked handler:
<div class="card" *ngFor="let d of data; let idx=index" (click)="cardClicked(idx)" [@cardFlip]="d.state">
  <!-- rest of the code goes here -->
</div>

Chech the template as I changed some stuff there. The [@cardFlip] is now bound to d.state rather than data.state. I am also passing the idx as a parameter to the cardClicked handler.

  • And then your handler becomes this:
cardClicked(index: number): void {
  const result = [...this.data];
  const { state } = result[index];
  result[index] = { ...result[index], state: state == 'default' ? 'flipped' : 'default' };
  this.data = result;
}

Answered By – Octavian M─ârculescu

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.