add regenerate of qrcode while changing size, info (qr) is now hidden

This commit is contained in:
danielvici123
2025-11-19 20:38:17 +01:00
parent 7bd00a3918
commit 2fa3a8b5f3
2 changed files with 11 additions and 4 deletions

View File

@@ -1,4 +1,4 @@
<div class="p-8 text-white">
<div class="px-8 text-white">
<div class="mx-auto">
<div class="mb-8">
<app-custom-title
@@ -49,12 +49,13 @@
</button>
</div>
<div class="flex justify-center mt-6 flex-col items-center space-y-4">
<div class="flex mt-6 flex-col items-center space-y-4">
<canvas #canvas class="hidden" #ziel></canvas>
@if (qrDataUrl) {
<img [src]="qrDataUrl" alt="Generated QR Code" class="mx-auto border-4 border-white rounded-lg max-w-[500px] max-h-[500px]" />
<p class="self-start block text-sm font-medium text-gray-300 mb-2">Generated QR Code:</p>
<img [src]="qrDataUrl" alt="Generated QR Code" class="self-center mx-auto border-4 border-white rounded-lg max-w-[600px] max-h-[600px]" />
<button (click)="downloadQR()"
class="w-full bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
class="w-full bg-green-500 text-white mt-4 py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
Download QR Code
</button>
}

View File

@@ -58,4 +58,10 @@ export class GeneratorQrcode {
link.click();
document.body.removeChild(link);
}
async ngOnInit() {
this.qrCodeDetailsForm.get('size')?.valueChanges.subscribe(() => {
this.generateQR();
});
}
}