ngx-scan-detect

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.