🚀 Feature Request: Awaitable rendering completion of <qrcode> component

[Anquuni]

🚀 Feature Request: Awaitable rendering completion of <qrcode> component

Description

Currently, the <qrcode> component renders a QR code onto a <canvas> element in the DOM. However, there is no reliable way in TypeScript to know when the rendering has completed.

This is problematic in cases where developers need to:

• Capture the rendered DOM (e.g. via toJpeg, html-to-image, etc.)
• Ensure the QR code is fully visible before triggering a screenshot, print, or animation
• Avoid setTimeout-based workarounds and DOM polling

Feature Proposal

Expose a mechanism to detect when the <qrcode> component has finished rendering.

Possible solutions

• Add a public renderingComplete: Promise<void> property
• Or add an @Output() rendered = new EventEmitter<void>()
• Internally trigger the resolution/emission after canvas drawing is completed

Example usage

@ViewChild(QrcodeComponent) qrComp!: QrcodeComponent;

async ngAfterViewInit() {
  await this.qrComp.renderingComplete;
  // now safe to call toJpeg() or perform DOM capture
}

Or with an output:

<qrcode
  [qrdata]="..."
  (rendered)="onQrRendered()"
></qrcode>

Thank you for maintaining this useful library! Adding this feature would greatly improve its flexibility in production environments where timing is critical.

[ali-toghiani]

have you tried listening to the emitQRCodeURL event? it's emitted whenever a QR Code is generated