Angular Typescript - waiting for a value from a popup dialog

Question

I have an html button that when pressed, calls a function that sets a 'display' boolean to true which makes a popup dialog box appear where the user can choose a name from a list of names. Choosing a name sets a 'selectedName' variable to the selected name.

Here's my problem - the same function that I originally call to display the popup dialog needs to do some more processing with the selected name - I would like to do all of this in a single function call. Something like this:

// Called by pressing an HTML button
getSelectedName() {
    display = true; // makes dialog popup appear

    // Wait for user to select a name and press a 'Confirm' button 
    // within the dialog popup

    // Once the user has selected a name, do something with it
    var person: Person;
    person.name = selectedName;
}

The popup dialog has Confirm/Cancel buttons - is there anyway to make the above function wait for the user to click the Confirm button, then continue on in the function?

Answer 1

You can create a promise that resolves once the user clicks confirm, then do any work you need only once that promise is resolved.

// Called by pressing an HTML button
getSelectedName() {
    display = true; // makes dialog popup appear

    // Create a promise that resolves when button is clicked.
    const buttonPromise = new Promise((resolve) => {
        const button = document.getElementById("my-confirm-button");
        const resolver = () => {
            resolve();
            button.removeEventListener("click", resolver);
        }

        button.addEventListener("click", resolver);
    });
    

    // Once the user has selected a name, do something with it       
    buttonPromise.then(() => {
        var person: Person;
        person.name = selectedName;
    })
}