ngx-barcode-input

ngx-barcode-input

This module contains an Angular input box component with a button that allows to scan a barcode when viewed from a mobile device (ex Android/iOS), which then records the scanned string of data into the input field for form submission.

Features:

• The component has minimal styling
• There is no need to include a component-specific external stylesheet
• As the input component takes a plain input and projects it, this means that by design the component supports all standard HTML input attributes, including custom attributes (data-), all the accessiblity properties, etc.
• This also means that these components are compatible with Angular Forms
• This repo is designed as a library in the Angular Package Format v4.0.
• This means that this module is compatible with AOT, and includes UMD bundles for use with SystemJs

Demo

https://ngxbarcodeinput.firebaseapp.com/

Installation

This is how to install the components:

npm install ngx-barcode-input

or

yarn add ngx-barcode-input

And on your application module:

import { NgxBarcodeInputModule } from 'ngx-barcode-input';

@NgModule({
  declarations: [ ...],
  imports: [
    BrowserModule,
    ....,
     NgxBarcodeInputModule
],
})
export class AppModule { }

See below for SystemJs / UMD installation.

Using the Barcode Input

Use the Barcode Input like this:

<div class="form-row">
  <label>Barcode Input:</label>
  <ngx-barcode-input></ngx-barcode-input>
</div>

Running the Demo Application

This command will build and start the demo application:

npm start

Building Module for Production

These commands will build, package, and deploy for NPM

npm run build
npm run packagr
npm publish dist

Running the Tests

The tests can be executed with the following commands:

npm test
npm integration

Using SystemJs via the UMD bundle ?

Make sure to add this to your map configuration, if you need the module served from a CDN:

map: {
   ...
   'ngx-barcode-input': 'https://unpkg.com/ngx-barcode-input@<version number>/ngx-barcode-input.umd.min.js'
}

Otherwise if serving from node_modulesdirectly:

map: {
   ...
   'ngx-barcode-input': 'node_modules/ngx-barcode-input/bundles/ngx-barcode-input.umd.min.js'
}

And in our packages property:

packages: {
   ...
  'ngx-barcode-input': {
    main: 'index.js',
    defaultExtension: 'js'
  }

}

License

MIT