closing a dialog box automatically after 3 seconds angular 5 observables

Question

I have a subscription that receives a signal upon that signal a boolean to show a dialog box in my html is set to true. I want the dialog box to automatically disappear after 3 seconds.

I am having trouble with the observable I have inside my subscription.

 this.updatedvolleyvar = this.venuevolly.receiveupdated()
      .subscribe(
        (req: any)=>{
          if (req != null){
            let stopcondition = false;
            this.showupdated = true;
            Observable.interval(3000)
              .takeWhile(() => !stopcondition)
                .subscribe(r =>{
                  this.showupdated = false;
                  stopcondition = true;
                });
          }
        }
      );

I believe I am in need of creating an object of type observable and then subscribing to it. I think it is the takeWhile that is throwing me off. What should I do next?

Answer 1

You can follow more easy, and I think, more proper way to close the dialog - use regular setTimeout:

this.updatedvolleyvar = this.venuevolly.receiveupdated()
  .subscribe((req: any) => {
    if (req != null) {
      let stopcondition = false;
      this.showupdated = true;
      setTimeout(() => {
        this.showupdated = false;
        stopcondition = true;
      }, 3000);
    }
});

There is no need to complicate your life, simple things are done simply.