🚀 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.
🚀 Feature Request: Awaitable rendering completion of
<qrcode>componentDescription
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:
toJpeg,html-to-image, etc.)setTimeout-based workarounds and DOM pollingFeature Proposal
Expose a mechanism to detect when the
<qrcode>component has finished rendering.Possible solutions
renderingComplete: Promise<void>property@Output() rendered = new EventEmitter<void>()Example usage
Or with an output:
Thank you for maintaining this useful library! Adding this feature would greatly improve its flexibility in production environments where timing is critical.