Hidding a DIV after a few seconds-CodePudding

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  (mouseenter)="onTextMouseEnter()" (mouseleave)="onTextMouseLeave()">
   <div >
       ...Some Text... 
   <div>
    <div  *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

CodePudding user response：

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