I have an overlay component that appears when a user clicks on certain things in my page, and in this overlay it gives a warning and 2 buttons, one for yes and the other for no. What I want is to create a function that'll serve this component, and then it will wait for the user to respond, and subsequently return true or false based on what button was pressed. This boolean result can then be used to further progress to other code.

This is what I have tried already. It uses promises rather than rxjs observables. A component will call this function to bring the overlay from the service, eg this.service.promptUser().then(res => if (res === true) { doSomething() }).

In the service:

didContinue: boolean = null;

async promptUser() {
    this.showOverlay.next(true) //BehaviourSubject when true brings the popup
    await waitForUser();
    const decision = this.didContinue;
    this.closeOverlay(); //sets didContinue back to null
   
    return decision
    }

The didContinue is a property inside of the service to indicate whether they have clicked yes or no using a boolean. Otherwise it will remain null. The click events from the overlay component will set the property didContinue to true or false.

The waitForUser function to wait for the user's input:

async waitForUser() {
    while (this.didContinue === null) {setTimeout(() => {}, 50};
    }

Currently it'll get stuck at the waitForUser() function but the popup will have not rendered at that stage, so the user can't input anything, the didContinue property will never change, and the application will freeze.

Please do send it forward if you know of an existing solution, I miss a lot of things with my google-foo. I am currently still new to Angular.