open Angular dialog in async methode

Question

I want to open progress dialog by the onclick event. When I click on the button, the dialog is not opened until all async methodes finished. So I want to open the dialog when it begin writing the file. someone any idea how to fix it?

Html

<buton onclick="writeFile"></button>

TS
public async writeFile() {
          const dialogRef  = this.dialog.open(ProgressComponent);
          await this.writePage1()
          await this.writePage2()
          await this.writePage3()
          await this.writePage4()
     }

Answer 1

For somone that has the same issue here How I fixed it. you can use afterOpened() from the dialog to let first the dialog open and run the async methodes.

this.dialog.open(ProgressComponent).afterOpened().subscribe(() => {
       await this.writePage1()
       await this.writePage2()
       await this.writePage3()
       await this.writePage4()
 });