ngx-scan-detect

Detects barcode or qr code scanning on document and emits the scanned barcode.

Demo | Video Demo

Angular directive for handling input events. Useful for determine input using a barcode-scanner.

Like binding to a regular type event in a template, you can do something like this:

<input ngxBarCodePut
       (detected)="onDetected($event)">

Installation

npm install --save ngx-scan-detect

Usage

You can then use the directive in your templates:

@Component({
  selector: 'app-ngx-scan-detect',
  templateUrl: './ngx-scan-detect.component.html',
  styleUrls: ['./ngx-scan-detect.component.scss'],
  standalone: true,
  imports: [CommonModule, NgxBarCodePutDirective],
})

export class AppComponent {
  public onDetected(event: IDetect) {
    console.info(event); 
    /* {event: KeyboardEvent, value: "sezmars", time: 0.07083499999716878, type: "scanner"} */
    /* {event: KeyboardEvent, value: "3333333", time: 0.17083499999716878, type: "keyboard"} */
  }

  public onDelete(event: IDelete) {
    console.info(event);
    /* {event: KeyboardEvent, value: "3333333", type: "delete"} */
  }
}

Options

| Property name | Type | Default | Description | |---------------|--------| ------ |------------------------------------------------------------------------------------------------------------------------------------------------| | debounce | number | 0 | This property is necessary for scenarios such as type-ahead where the rate of user input must be controlled. | | workMode | string | manual | This property controls the automatic clearing of the input field. | | skipStart | number | 0 | Allows you to ignore the first values of the length of the input data. The search begins after entering the first character if the value is 0. | | detected | event | empty | Returns object with keyboard event, input value, data entry time and device type: keyboard or scanner. | | delete | event | empty | Returns an object with input value, keyboard event, and type. |