ngx-barcodeput

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
       (onDetected)="onDetected($event)">

Installation

npm install --save ngx-barcodeput

Usage

Add NgxBarCodePutModule to your list of module imports:

import { NgxBarCodePutModule } from 'ngx-barcodeput';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, NgxBarCodePutModule],
  bootstrap: [AppComponent]
})
class AppModule {}

You can then use the directive in your templates:

@Component({
  selector: 'app',
  template: `
    <input type="text"
       ngxBarCodePut
       maxlength="14"
       [skipStart]="3"
       [debounce]="300"
       autocomplete="off"
       (onDelete)="onDelete($event)"
       (onDetected)="onDetected($event)">
       `
})

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

  public onDelete(event: IDelete) {
    console.log(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.
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.
onDetected	event	empty	Returns object with keyboard event, input value, data entry time and device type: keyboard or scanner.
onDelete	event	empty	Returns an object with input value, keyboard event, and type.