angular setTimeOut() not working properly

Question

I have div class alert.

    <div class="alert" *ngIf=alert>
      <h1>Copied</h1>
    </div>

I want to show this div for 3 sec. Initially It will be hidden and after clicking a button I run a function and then I change the value to true and then it become visible. All the thing is happening. But When I am running a setTimeOut() function and after 3 sec I want to make the div invisible again that is not working.

alert; //the value i am using to hide the div
//after clicking the function I am running the function
copying() {
    this.clipboard.copy(this.currentCode);
    this.alert = true;
    setTimeout(function() {
      this.alert = false;
      // the alert value is being change to false but the div is not hiding.
    }, 3000)
}

Answer 1

Change your code like this -

setTimeout(() => {
  this.alert = false;
}, 3000);

The reason for this is that the value of this in a function depends on how the function is called.