[Feature Request] Angular 16 framework support for this library

[saifk9]

Is your feature request related to a problem? Please describe.
I'm encountering difficulties integrating the html5-qrcode library into my Angular 16 project due to a lack of clear syntax and implementation methods.

Describe the solution you'd like
I require clear guidance and documentation on the syntax and proper implementation methods for integrating the html5-qrcode library into an Angular 16 project. Specifically, I need detailed instructions on how to effectively utilize the library within the Angular environment to scan items from a mobile device and update the quantity.

Describe alternatives you've considered
Given the current challenges, I've explored several alternatives, including:
*Searching for comprehensive tutorials or guides specifically tailored to integrating html5-qrcode with Angular 16.
*Seeking assistance from the Angular community or forums to identify best practices or workarounds for integrating external libraries into Angular 16 projects.
*Exploring alternative QR code scanning libraries with better documentation and support for Angular 16.

Additional context
*Any relevant screenshots or code snippets demonstrating the challenges faced during integration.
*Details about the specific areas where clear syntax and implementation methods are lacking.
*Information on the Angular 16 project environment, including dependencies and configurations.
*Any additional context or specifications that may aid in providing accurate guidance and support.

[ROBERT-MCDOWELL]

html5-qrcode was never developed to be on angular framework. however you can easily create a PR to satisfy your wishes.

[lazmeister]

We have implemented this in Angular. Let me know if you still need help with this

[saifk9]

Hi Team, Can you share the code file for Angular, I tried searching for it but couldnt find it.

…

On Fri, 10 May 2024 at 07:29, Laszlo ***@***.***> wrote: We have implemented this in Angular. Let me know if you still need help with this — Reply to this email directly, view it on GitHub <#902 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BG7ONX535W3PM36UL7YEKGDZBQSYBAVCNFSM6AAAAABEXPV2M6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBTG4YTEMZRGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[lazmeister]

Hope this helps, npm i html5-qrcode in your angular project,

For your barcode component (giving you bits and pieces but let me know if that helps)

import { Html5Qrcode} from 'html5-qrcode';

  qrResultString: string;

ngOnInit() {
    const html5QrCode = new Html5Qrcode('qr-reader');
    const config = {
      fps: 10,
      qrbox: 300,
      showTorchButtonIfSupported: true,
      rememberLastUsedCamera: true,
      showZoomSliderIfSupported: true,
      useBarCodeDetectorIfSupported: true,
      defaultZoomValueIfSupported: 2};

    const onScanSuccess = (decodedText, decodedResult) => {
      if (!this.qrResultString) {
        // handle the scanned code as you like, for example:
        console.log(`Code matched = ${decodedText}`, decodedResult);
        this.qrResultString = decodedText;
        this.utilitiesService.delay(1000); // this is just a ms delay function
        html5QrCode.stop();
        this.dismissModal(); // our own function to close the modal (we are using Ionic)
      }
    };
    const onScanFailure = (error) => {
    };
    // If you want to prefer back camera
    html5QrCode.start({ facingMode: 'environment' }, config, onScanSuccess, onScanFailure);
  }

HTML:

<div style="width: 100%">
  <div id="qr-reader" class="qr-reader"></div>
</div>

CSS:

.barcodeModal {
  z-index: 1;
}

.qr-reader {
  display: inline-block;
}