In Angular 1.x this following code works as I want to to click and flip a card inside an ng-repeat
<div class="card" ng-repeat="let card of cards">
<div class="flipcard" ng-class="{'flipped':isflipped}" ng-click="isflipped = !isflipped">
</div>
</div>
However in Angular 2 when clicked, it flipped every "card" inside the ngFor loop... how do I bind the ngClass condition to the element itself only?
<div class="card" *ngFor="let card of cards">
<div class="flipcard" [ngClass]="{'flipped': isflipped }" (click)="isflipped = !isflipped;">
</div>
</div>
Change it to:
<div class="card" *ngFor="let card of cards">
<div class="flipcard" [ngClass]="{'flipped': card.isflipped }" (click)="card.isflipped = !card.isflipped;">
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With