Angular - Anchor tag with href and click event

Question

I have an anchor tag like this:

<a id="open8DReportPDF" (click)="download8DReport($event)" [href]="safeUrl" target="_blank"></a>

With it, I need to open a PDF that is generated in the 'download8DReport' function. This function generates a blob that is sanitized and inserted in the 'safeUrl' variable, so the PDF can be opened in a new browser tab:

download8DReport(e) {
    this.complaint8DReportService.get8DReportPDF(this.id, this.getReportName())
        .subscribe((response: Blob) => {                 
            this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(response));                  
        });
}

The only reliable way I've found to make it work properly in all browsers and with no major problems is to use the 'href' property of the anchor tag. Also, 'window.location' does not work with SafeUrls. The problem is that the 'download8DReport' function ends before the subscribe is completed, so the 'safeUrl' variable does not have the proper value.

I tried to use a hidden anchor tag and perform the click programmatically with a button after the 'download8DReport' function, but the browser says that a pop-up window wants to be displayed, and I'd like to avoid this.

Is there any way to wait for the subscribe to finish before 'href' redirect is executed?