How to create an event that lasts for some time?

Issue

For example, I have a div:

<div [hidden]="!isNotificationDisplayed" class="notification">
  <h2 align="center" class="set-margin" #notification>Node was...!</h2>
  <h4 align="center">Press 'Space' to hide it</h4>
</div>

isNotificationDisplayed is a variable whose value (true/false) determines whether this div will be displayed or not. By default, it is set to false, meaning the div is not displayed. I want to make a function that sets true for 3 seconds, i.e. the div is visible for 3 seconds, after which it is reset to false.

Solution

setTimeout(() => {
    this.isNotificationDisplayed = true;
  }, 3000);

Answered By - Mojtaba Nejad Poor Esmaeili