Warm tip: This article is reproduced from serverfault.com, please click

Show or hide element on hover in angular

发布于 2020-11-28 10:52:41

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

Questioner
hamthiii
Viewed
0
17 2020-11-28 20:29:39

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;