[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 https://github.com/mebjas/html5-qrcode/issues/902#issuecomment-2103712310, 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;
}