I used angularx-qrcode to generate a qrcode where it populates data from qrInfo. However I am getting this error:

ERROR TypeError: Cannot read properties of undefined (reading 'qrcElement') The code on qr-code-generate.component.html looks like:

<qrcode *ngIf="qrInfo" cssClass="coolQRCode" #qrcode [qrdata]="qrInfo" [width]="256" elementType="img" [errorCorrectionLevel]="'M'"></qrcode><a [href]="link" download><button class="btn btn-block (click)="downloadQRCode()">Download QRCode</button></a>

Whereas the code on the controller qr-code-generate.component.ts looks:

link: string;
 @ViewChild('qrcode', { static: true }) qrcode: QRCodeComponent;

  qrInfo : any;

Back to the *.component.ts file we handle the downloadQRCode() function as follows:

downloadQRCode() {this.link = this.qrcode.qrcElement.nativeElement.firstChild.src}

I can not download the img using the reference to the qrcode element we can access it's firstChild. And when I remove *ngIf="qrInfo" from ***.component.html I am receiving an error

angularx-qrcode.mjs:165 [angularx-qrcode] Error generating QR Code: angularx-qrcode] Field `qrdata` is empty, set allowEmptyString="true"' to overwrite this behaviour.