Ngx-scanner-detection NPM

NgxScannerDetection

Detects barcode scanning on document, validates it and emits the scanned barcode. For Angular 7+ (should work with former versions too)

Installation

npm install ngx-scanner-detection

app.module

import {ScannerDetectionModule} from 'ngx-scanner-detection';

And add ScannerDetectionModule to imports

Config

interface ScannerConfiguration {
  minLength?: number; // 7
  maxLength?: number; //  14
  scannerStartsWith?: string; // '' - characters to trim before the code
  scannerEndsWith?: string; // '' - characters to trim after the code
  scanTimeout?: number; // 100 - timeout for detection in ms
  replaceNotNumber?: boolean; // true - allowes numbers only [0-9], replace everything else
  allowNotNumber?: boolean; // false  - allowes numbers only [0-9], replace everything else
  ignoreOverElement?: string[]; // ['INPUT'] - array of tag names that should disable emit
  barcodeType?: string; // ean13 - gtin[d] or ean[\]
}

Usage

<ngx-sw-scanner-detection
  (scan)="handle($event)"
  [config]="{scannerEndsWith: 'Enter'}"
>
  <input #input> ### not needed, only for showing the code
</ngx-sw-scanner-detection>

<button (click)="simulateScanner()">Scanner Simulation</button>

Example Component

  @ViewChild('input') input: ElementRef;

  handle(event: ScanDetected) {
    console.log(event);
    this.input.nativeElement.value = event.barcode;
  }

  // dummy
  simulateScanner() {
    const s = '1234567890123';
    for (let i = 0; i < s.length; i++) {
      const e = new KeyboardEvent('keyup', {bubbles : true, cancelable : true, key : s[i], shiftKey : false});
      setTimeout(() => document.dispatchEvent(e));
    }
    const xe = new KeyboardEvent('keyup', {bubbles : true, cancelable : true, key : 'Enter', shiftKey : false});
    setTimeout(() => document.dispatchEvent(xe));
  }

This project was generated with Angular CLI version 7.3.3.