0

I'm from Java background. There we have multithreading to handle these kind of behaviors. I need help with Angular 6. When my component loads. Some simple style is to be applied on that. But after 5 seconds on click of button the style should go away.

Template:

<div [class.error-warning]="applyStyle">
  <select>
    <option>Apple</option>
    ...
  </select>
</div>

<button (click)="removeStyle()">Remove</button>

Typescript:

applyStyle: boolean=true;

removeStyle() {
  //after 5 seconds
  this.applyStyle=false;
}

CSS:

.error-warning {
  border: 2px solid red;
}

I tried sleep here but it blocked the entire dropdown for 5 seconds. Please help me out. Here is the stackblitz.

Tanzeel
  • 4,174
  • 13
  • 57
  • 110

1 Answers1

1

You can use setTimeout for this.

So in your case, your removeStyle() method would look like:

removeStyle() {
  // after 5 seconds
  setTimeout(() => this.applyStyle = false, 5000);
}
Darren Ruane
  • 2,385
  • 1
  • 8
  • 17
  • Will it not block the selections for 5 seconds since it is the same thread. I think the entire main flow will wait for 5 secs. Please correct me. – Tanzeel May 06 '21 at 13:14
  • It will not block your main thread, no. [Here's](https://stackoverflow.com/a/29391634/10657522) a very useful answer to get more information about 'why' it won't block the main thread. – Darren Ruane May 06 '21 at 13:25