Skip to content
David Werth edited this page Jul 9, 2021 · 8 revisions

Installation

To install this package, run:

yarn add @zxing/browser@latest 
yarn add @zxing/[email protected] 
yarn add @zxing/ngx-scanner@latest

or

npm i @zxing/browser@latest --save
npm i @zxing/[email protected] --save
npm i @zxing/ngx-scanner@latest --save

Make sure you use version 0.18.3 of @zxing/library as the latest version currently has issues with 1D-codes (see #419)

Then import it into your Angular Module, see Usage.

Installation Problems

If you experience problems upon installing the component, please run

npm install --global --production windows-build-tools

and try again. If the problem still occurs, file an issue.

Usage

Import it on your module file:

// some.module.ts
import { NgModule } from '@angular/core';

// your very important imports here

// the scanner!
import { ZXingScannerModule } from '@zxing/ngx-scanner';

// your other nice stuff

@NgModule({
  imports: [ 
    // ...
    // gets the scanner ready!
    ZXingScannerModule,
    // ...
  ]
})
export class SomeModule {}

Put the component in the interface:

<!-- some.component.html -->
<zxing-scanner></zxing-scanner>

And that's it! 😉

Choosing what decoders to run

By default the component comes with QR code decoder enabled, to enable more decoders at once you can simply make use of the formats property like that:

<zxing-scanner [formats]="['QR_CODE', 'EAN_13', 'CODE_128', 'DATA_MATRIX']"></zxing-scanner>

You can also map the formats with the library's enum and pass them from the component:

<zxing-scanner [formats]="allowedFormats"></zxing-scanner>
import { BarcodeFormat } from '@zxing/library';

export class MyComponent {

  allowedFormats = [ BarcodeFormat.QR_CODE, BarcodeFormat.EAN_13, BarcodeFormat.CODE_128, BarcodeFormat.DATA_MATRIX /*, ...*/ ];

}

Available formats (decoders)

For a list of available formats, please visit our core package. As this feature relies directly on the ZXing's core, so you can find the available formats here: https://github.com/zxing-js/library/blob/master/src/core/BarcodeFormat.ts

Clone this wiki locally