How to set visibility in Angular from Directive on Mouse events-CodePudding

I am trying to handle visibility of links on mouse events, When user mouseover on link, link should be visible, and on mouseout link should be hidden. For some reason, I am able to add hidden style to an element, but once an element is hidden, I am not able to change it to visible on mouseover.

<table class="table table-bordered">
    <caption style="caption-side: top; text-align: center;">Food Items</caption>
    <tbody>
        <tr *ngFor='let food of foods'>
            <td>
                <a hideShowElement [routerLink]="" class="link-danger" (click)='deleteFoodItem(food.id)'>DELETE</a>
            </td>
        </tr>
    </tbody>
</table>

My directive,

import { Renderer2 } from '@angular/core';
import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: '[hideShowElement]'
})
export class HideShowDirective {

    @HostBinding('style.visibility') visibility: string;

  constructor(private elementr: ElementRef, private renderer: Renderer2) {
    
   }

    @HostListener('mouseover') 
    onm ouseOver() {
        this.renderer.setStyle(this.elementr.nativeElement, 'visibility', 'visible');
    }
 
    @HostListener('mouseleave') 
    onm ouseLeave() {
        this.renderer.setStyle(this.elementr.nativeElement, 'visibility', 'hidden');
    }
}

CodePudding user response：

It is not visibility. Please try with display property. Display property value was display:none and display:block

CodePudding user response：

There is one more work around for the given problem, you can use matTooltip to show the link when the user hover on that particular HTML element. Then attach (click) method to the element for redirecting to that particular URL.

I hope this will be helpful.