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="mx-auto">
<div class="mb-8"> <div class="mb-8">
<app-custom-title <app-custom-title
@@ -49,12 +49,13 @@
</button> </button>
</div> </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> <canvas #canvas class="hidden" #ziel></canvas>
@if (qrDataUrl) { @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()" <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 Download QR Code
</button> </button>
} }

View File

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