Q:

How to wait for HTTP Request Response + Confirm Dialogue PopUp + Angular 8

I have a requirement where I want to show the confirm popup message before redirecting to other page, where I am taking input from the user weather he want to leave with unsaved changes or not. 
What is happening!
On browser confirm dialogue box come first then get the HTTP-Request response which is not correct. 
What should be!
I want the HTTP Response get first and if condition satisfied then pop up the confirm dialogue message. 
Here is the code sample I am using for my project. 
service.ts file 
 async IsUnSavedRosterExistsTwo() {
    console.log('async method called');
    const url = this.util.getBaseURL() + apiURLs.IsUnSavedRosterExists;
    const rr =  await this.http.get<boolean>(url).toPromise();
    console.log(rr);
    return rr;
  }

I have tried all the possible solution like subscribe, promise , pipe and all but nothing is work here. 
component.ts 
canDeactivate() {
    this.saveDownloadButton = false;
    // const IsUnSavedRosterExists = this.rosterService.IsUnSavedRosterExists();
    const IsUnSavedRosterExists = this.rosterService.IsUnSavedRosterExistsTwo();

    debugger;
    if (IsUnSavedRosterExists) {
      console.log('executing the code');
      return confirm('You have unsaved Employee Data. Do you wish to proceed without saving?');
    } else {
      this.saveDownloadButton = false;
    }
    return this.saveDownloadButton;
  }

In Short, I want to wait for http-request response to come first and then execute if condition satisfies then pop up the confirm dialog box else redirect to other page.
Do let me know if my question is not clear.

A:

You have to convert the canDeactivate() function into an async function and then you can await for the this.rosterService.IsUnSavedRosterExistsTwo() function to resolve before proceeding further. See the code below:
async canDeactivate() {
    this.saveDownloadButton = false;
    const IsUnSavedRosterExists = await this.rosterService.IsUnSavedRosterExistsTwo();

    debugger;
    if (IsUnSavedRosterExists) {
      console.log('executing the code');
      return confirm('You have unsaved Employee Data. Do you wish to proceed without saving?');
    } else {
      this.saveDownloadButton = false;
    }
    return this.saveDownloadButton;
  }

