CODEWITHSUNDEEP
angularbarcodezxing
Jagadeesh
Jagadeesh

Reputation: 2097

@zxing/ngx-scanner - Is there any simplified way to use this package to scan barcodes?

My angularCLI version is as below

Angular CLI: 6.2.9
Node: 8.9.1
OS: win32 x64

This Link doesnt have a proper documentation of how to utilize the functionality. Could anyone help with any sample example from this package? Also StackBlitz provided in the document is not working.

Upvotes: 1

Views: 16193

Answers (2)

Imran Charolia
Imran Charolia

Reputation: 11

Check the Wiki and this blog

Install following packages

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

Add import statement in app.module

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

Add zxing-scanner element in your component html

<zxing-scanner></zxing-scanner>

Upvotes: 0

Machado
Machado

Reputation: 10354

  1. Install @zxing/ngx-scanner via NPM or Yarn, I'll presume you know how to do that.

  2. Add the ZXingScannerModule to your AppModule (or any other where you wanna use it):

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

@NgModule({
  imports: [
    ZXingScannerModule,
  ],
  declarations: [AppComponent /*, other components */],
  bootstrap: [AppComponent],
})
export class AppModule { }
  1. Add the component to your template code and set the property scanSuccess to receive successful decoding results:
<zxing-scanner (scanSuccess)="onCodeResult($event)"></zxing-scanner>

<section class="results" *ngIf="qrResultString">
  <div>
    <small>Result</small>
    <strong>{{ qrResultString }}</strong>
  </div>
  <button mat-icon-button (click)="clearResult()">&times;</button>
</section>
  1. Prepare your component's TS code to receive data and display it:
  qrResultString: string;

  clearResult(): void {
    this.qrResultString = null;
  }

  onCodeResult(resultString: string) {
    this.qrResultString = resultString;
  }
  1. You got it.

That's the easier way to use it, written using the version 1.7.2. Take a look at this StackBlitz demo (please ignore Material components, they're not needed).

Upvotes: 9

Related Questions