Angular wait for subscription before executing function to generate an excel

I have a function where I'm generating an excel from an api request. on the webpage I have a download button that executes the function downloadCSV(). It currently works as expected unless I click on the link too fast when navigating to the page.

In the function I'm subscribing to the data and using it to fill an array which is then used to generate an excel. The excel will download instantly regardless of whether the array is populated.

I'm looking to either retry the function if the excel is empty.

OR

Wait until the subscription is finished to execute.

downloadCSV (): void {
//list headers
const csvHeaders = [
 'bunch of headers'
];

//initate array
const data: any[] = [];
//get name for each customer
this.nameService.getNames().subscribe({
  next: ({ names }) => {
    //for each customer list details 
    names.forEach(name => {
      //get details
      this.nameService.getPersonalData(name.firstName).pipe(
        tap((data: Idata) => {
          data.push({
            'bunch of data points'
          });
        })
      ).subscribe(
        { error: (err) =>
        { console.error(err); } });
    });
  }
});
const filename = 'dataReport';
    this.generateCSV(data, filename, reportHeaders);

}

  generateCSV (data, filename, reportHeader): void {
    new ngxCsv(data, filename, { headers: reportHeader, showTitle: true, title: this.customerDetails });
  }

So for the function I need to getNames, then use the firstname to get the actual data I want. Then subscribe and generate an excel.

For now the excel is instantly downloading without first waiting to be populated by data.

The best way is to wait for all the subscriptions to end.

If your excel is empty it can be for completely different reasons. And you probably want to handle them specifically.
And if your requests are big who knows how many time you will have to retry ?
In most of cases randomly retrying is not the good way.

So in your case I think the forkJoin operator from rxjs will do the job.

To put in simply it will fuse all your observable into one. So you will have only one subscription in the end (one for all the getPersonalData requests).
The forkJoin will emit a value only when ALL the observables have emitted once, which is what you want.

So your code will look like something like this

this.nameService.getNames().subscribe({
      next: ({ names }) => {
        //for each customer list details
        forkJoin(
          names.map((name) => {
            //get details
            return this.nameService.getPersonalData(name.firstName)
              .pipe(
                 catchError((err) => {
                    console.error(err);
                 }));
          }),
        ).subscribe((datas: Idata[]) => {
          // Do whatever you want with datas before using it
          this.generateCSV(datas, filename, reportHeaders);
        });
      },
    });

You wait for all the requests to emit and then you call your method.

PS: I didn't run the code so they might be some syntax mistake

PS2: Don't forget to unsubscribe from all your observables !