I have an angular material card with an "x" button.
just wanted the "x" button to be hidden normally and be shown while hovering on the card.
code for the card:
<mat-card>
<mat-card-title>hello title</mat-card-title>
<mat-card-content>hello content</mat-card-content>
<mat-card-actions>
<button mat-icon-button><mat-icon>close</mat-icon></button>
</mat-card-actions>
</mat-card>
thought of using ngClass
but didn't know how to tell it if user isHovering or not
Try this:
<mat-card (mouseover)="showButton = true" (mouseleave)="showButton = false" >
<mat-card-title>hello title</mat-card-title>
<mat-card-content>hello content</mat-card-content>
<mat-card-actions>
<button mat-icon-button *ngIf = "showButton"><mat-icon>close</mat-icon></button>
</mat-card-actions>
</mat-card>
Declare the showButton
variable in your component .ts
file like this:
showButton: boolean = false;