Getting Started - zxing-js/ngx-scanner GitHub Wiki

Installation

To install this package, run:

yarn add @zxing/browser@latest 
yarn add @zxing/library@latest
yarn add @zxing/ngx-scanner@latest

or

npm i @zxing/browser@latest --save
npm i @zxing/library@latest --save
npm i @zxing/ngx-scanner@latest --save

Angular version compatibility table:

Angular	@zxing/ngx-scanner
16.x.x	3.9.1
15.x.x	3.9.0
14.x.x	3.6.2
13.x.x	3.5.0
12.x.x	3.3.0
10.x.x	3.1.3
9.x.x	3.0.1
8.x.x	2.0.1
5.x.x	1.7.1
4.x.x	0.3.4

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