Using USB barcode scanner in angular application

Question

I have an application in Angular 10 and I would like to implement USB barcode scanner input (for example in keyboard mode). The problem is that I'm using package ngx-barcodeput where I need an input field which should be active when barcodes is scanning. How can I use something like ngx-barcodeput without input field? I would like to have my scanner active all the time on the page not only when I click on input field. Have any tips? I searched the web and I cannot find any another package which can be used for usb barcode scanners in angular apps.

Answer 1

This code scans barcode from USB bacode scanner in angular application,

HTML file:

    <div class="container">
        <header><h1>My App title</h1></header>
        <div class="row">
            <input type="text" (window:keypress)="onKey($event)"  autofocus />
            <p>barcode: {{ barcode }}</p> 
        </div>
    </div>

app component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'barcode-scanner',
  templateUrl: './scan-barcode.component.html',
  styleUrls: ['./scan-barcode.component.css'],

})
export class ScanBarcodeComponent implements OnInit {
  barcode: string='';
  values: string[] =[];
  constructor() { }

  ngOnInit(): void {
  }
  onKey(event: any) {
    this.barcode=event.target.value;
}

}

See complete code here: https://github.com/saurabhku/ex-angular-barcode-scan