Ngx-barcodeput NPM

ngx-barcodeput

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.