Hidding a DIV after a few seconds

Question

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

Answer 1

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);
    }