angulartypescriptsettimeoutmouseentermouseleave

Hidding a DIV after a few seconds


I have a div that becomes visible / invisible based on a boolean variable. And i'm trying to add a timeout so my "actions" div could disapear after a few seconds.

This is how my code looks like now.

My html :

<div class="text" (mouseenter)="onTextMouseEnter()" (mouseleave)="onTextMouseLeave()">
   <div class="text">
       ...Some Text... 
   <div>
    <div class="actions" *ngIf="showMessageActions">
        <mat-icon>settings</mat-icon>
    </div>
</div>



And my component methods

    onTextMouseEnter(){
        this.showMessageActions=true
    }
    
    onTextMouseLeave(){
        window.setTimeout(function(){
            this.showMessageActions=false
        }.bind(this), 3000);
    }


it's working without the window timeout. And aparently the div disapears when I interact with other component on the screen.

not sure why angular doesn´t update the component after the variable update on the mouse leave event when I tried to use the timer...

I looked for it on the forum and found this similar post but the accepted solution doent's solved the problem. Any help would be apreciated


Solution

  • Use the ChangeDetectorRef to trigger the detection manually:

    
      constructor(
        .
        .
        private cd: ChangeDetectorRef,
      ) {
      }
    
        onTextMouseEnter(){
            this.showMessageActions = true;
            this.cd.detectChanges();
        }
        
        onTextMouseLeave(){
            window.setTimeout(function(){
                this.showMessageActions = false;
                this.cd.detectChanges();
            }.bind(this), 3000);
        }