Show or hide element on hover in angular

Question

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

Answer 1

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;

Answer 2

There is many way of soluation

1.you can set using scss or css

html file

<mat-card class="CARD">
   <mat-card-title>hello title</mat-card-title>
   <mat-card-content>hello content</mat-card-content>
   <mat-card-actions>
    <button class="CLOSE" mat-icon-button><mat-icon>close</mat-icon></button>
   </mat-card-actions>
</mat-card>

.scss file

    .CLOSE {
        display : none;
      }
    .CARD {
           &:hover {
               .CLOSE {
                display : block !important
              }
            }
         }

2. Using variables .ts file

 btnVisible: boolean = true;

.html file

<mat-card (mouseover)="btnVisible = false" (mouseleave)="btnVisible = true" >
<mat-card-title>hello title</mat-card-title>
<mat-card-content>hello content</mat-card-content>
<mat-card-actions>
    <button mat-icon-button *ngIf ="btnVisible"><mat-icon>close</mat-icon></button>
</mat-card-actions>

Hope it will usefull for all !