Hovering over mat-card - html

Question

How to show mat-card-action on hover over card. When i hover over one card it shows action for every card.
<mat-card (mouseover)="hover=true" (mouseleave)="hover=false" [className]="flashcard.privatno ? 'privatno' : 'javno'" *cdkVirtualFor = "let flashcard of flashcards; let i = index" (click)="loadOne(i)">
<mat-card-content>
<p>{{seci(flashcard.pitanje)}}</p>
</mat-card-content>
<mat-card-actions >
<button mat-button *ngIf="hover==true">LIKE</button>
</mat-card-actions>
[Hovering over first card. It should show only LIKE on that card and not on the other][1]
[1]: https://i.stack.imgur.com/36Bsp.png

Answer 1

When you say *ngIf="hover==true" you are comparing all the elements of the for loop with the same variable, that's why all will display/hide at the same time. You need a way to differentiate each element. If your flashcard item have an id, you can try something like this:
.html:
<mat-card (mouseover)="toggleHover(flashcard.id)" (mouseleave)="removeHover()" [className]="flashcard.privatno ? 'privatno' : 'javno'" *cdkVirtualFor = "let flashcard of flashcards; let i = index" (click)="loadOne(i)">
<mat-card-content>
<p>{{seci(flashcard.pitanje)}}</p>
</mat-card-content>
<mat-card-actions >
<button mat-button *ngIf="hoveredElement === flashcard.id ">LIKE</button>
</mat-card-actions>
</mat-card>
.ts
public hoveredElement:any;
toggleHover(id) {
this.hoveredElement = id
}
removeHover() {
this.hoveredElement = null;
}