Wait before setting a new value to a variable in Angular 2

Question

I'm trying to animate a message that appears and then disappears after some seconds.

In my template:

<p [ngClass]="{'show-message': showMessage, 'hide-message': !showMessage}">My message!!</p>

My CSS:

.show-message {
  opacity: 1;
  transition: .5s ease-in-out all;
}
.hide-message {
  opacity: 0;
  transition: .5s ease-in-out all;
}

My component:

...
showMessage: boolean;

constructor() {
  this.showMessage = false;
}

someClickThatShouldShowMessage() {
  this.showMessage = true;
  setInterval(() => {this.showMessage = false;}, 3); //This doesn't seem right
}

However, the message just doesn't appear altogether. Why is this? Thanks!

Answer 1

setInterval accepts milliseconds as a parameter. Change 3 to 3000.

Also setInterval will keep repeating every x milliseconds. You probably want setTimeout.