DEV Community 👩‍💻👨‍💻

Xiao Ling
Xiao Ling

Posted on • Originally published at dynamsoft.com

How to Create an Angular Barcode QR Code Scanning Library

Previously, we created an Angular Barcode and QR Code Scanner. To make it reusable for other Angular applications, we can turn it into an Angular library. This article will show you the process of creating an Angular barcode QR code scanning library, as well as how to integrate it into your Angular application.

Download ngx-barcode-qrcode-sdk

https://www.npmjs.com/package/ngx-barcode-qrcode-sdk

npm i ngx-barcode-qrcode-sdk
Enter fullscreen mode Exit fullscreen mode

Steps to Create an Angular Library for Dynamsoft JavaScript SDK

The official Angular tutorial guides you to generate a new library skeleton in a new workspace without containing an Angular application.

ng new my-workspace --no-create-application
cd my-workspace
ng generate library my-lib
Enter fullscreen mode Exit fullscreen mode

However, to develop and debug an Angular library conveniently, it is better to scaffold a library project in an Angular application.

Our goal is to migrate the Angular Barcode Reader and Barcode Scanner components from the existing Angular barcode QR code scanner application into an Angular library. So get the source code and generate the library project as follows:

git clone https://github.com/yushulx/angular-barcode-qr-code-scanner.git
cd angular-barcode-qr-code-scanner
ng generate library ngx-barcode-qrcode-sdk
Enter fullscreen mode Exit fullscreen mode

Afterwards, copy barcode-reader and barcode-scanner folders to projects/ngx-barcode-qrcode-sdk/src/lib. According to the Angular library naming convention, we rename the folders to ngx-barcode-reader and ngx-barcode-scanner.

To access Dynamsoft JavaScript SDK from the Angular library, we need to add it as a peer dependency in package.json.

"peerDependencies": {
    ...
    "dynamsoft-javascript-barcode": "^9.0.2"
  },
Enter fullscreen mode Exit fullscreen mode

An angular library consists of service, component and module. Open the public-api.ts file to export the APIs of the library.

export * from './lib/ngx-barcode-qrcode-sdk.service';
export * from './lib/ngx-barcode-reader/ngx-barcode-reader.component';
export * from './lib/ngx-barcode-scanner/ngx-barcode-scanner.component';
export * from './lib/ngx-barcode-qrcode-sdk.module';
Enter fullscreen mode Exit fullscreen mode

A module is the entry point of the library. In ngx-barcode-qrcode-sdk.module.ts, we declare Angular components and use the Angular service to store the global configurations of Dynamsoft JavaScript Barcode SDK.

import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { NgxBarcodeReaderComponent } from './ngx-barcode-reader/ngx-barcode-reader.component';
import { NgxBarcodeScannerComponent } from './ngx-barcode-scanner/ngx-barcode-scanner.component';
import { BarcodeQrcodeSdkServiceConfig } from './ngx-barcode-qrcode-sdk.service';

@NgModule({
  declarations: [
    NgxBarcodeReaderComponent,
    NgxBarcodeScannerComponent,
  ],
  imports: [
  ],
  exports: [
    NgxBarcodeReaderComponent,
    NgxBarcodeScannerComponent,
  ]
})
export class NgxBarcodeQrcodeSdkModule {
  constructor(@Optional() @SkipSelf() parentModule?: NgxBarcodeQrcodeSdkModule) {
    if (parentModule) {
      throw new Error(
        'GreetingModule is already loaded. Import it in the AppModule only');
    }
  }

  static forRoot(config: BarcodeQrcodeSdkServiceConfig): ModuleWithProviders<NgxBarcodeQrcodeSdkModule> {
    return {
      ngModule: NgxBarcodeQrcodeSdkModule,
      providers: [
        { provide: BarcodeQrcodeSdkServiceConfig, useValue: config }
      ]
    };
  }
}
Enter fullscreen mode Exit fullscreen mode

The configurations include the license key and the resource path, which are defined in ngx-barcode-qrcode-sdk.service.ts.

import { Injectable, Optional } from '@angular/core';
import { BarcodeReader } from 'dynamsoft-javascript-barcode';

export class BarcodeQrcodeSdkServiceConfig {
  licenseKey = '';
  resourcePath = '';
}

@Injectable({
  providedIn: 'root'
})
export class NgxBarcodeQrcodeSdkService {

  constructor(@Optional() config?: BarcodeQrcodeSdkServiceConfig) { 
    if (config) { 
      BarcodeReader.license = config.licenseKey;
      BarcodeReader.engineResourcePath = config.resourcePath;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

There is no more to do for the two ngx-barcode-reader and ngx-barcode-scanner components except add the @Output() decorator, which lets the decoding results flow from the child component to a parent component.

barcode-reader

export class NgxBarcodeReaderComponent implements OnInit {
  @Output() result = new EventEmitter<string>();
  ...

  this.reader.decode(file).then((results: any) => {
          console.log(results);
          let txts: any = [];
          try {
            let localization;
            if (results.length > 0) {
              for (var i = 0; i < results.length; ++i) {
                txts.push(results[i].barcodeText);
                localization = results[i].localizationResult;
                this.overlayManager.drawOverlay(
                  localization,
                  results[i].barcodeText
                );
              }

              this.result.emit(txts.join(', '));
            } else {
              this.result.emit(txts.join(', '));
            }
          } catch (e) {
            alert(e);
          }
        });
  ...
}
Enter fullscreen mode Exit fullscreen mode

barcode-scanner

export class NgxBarcodeScannerComponent implements OnInit {
  @Output() result = new EventEmitter<string>();
  ...

  this.scanner.onFrameRead = results => {
        ...

        let txts: any = [];
        try {
          let localization;
          if (results.length > 0) {
            for (var i = 0; i < results.length; ++i) {
              txts.push(results[i].barcodeText);
              localization = results[i].localizationResult;
              this.overlayManager.drawOverlay(localization, results[i].barcodeText);
            }
            this.result.emit(txts.join(', '));
          }
          else {
            this.result.emit(txts.join(', '));
          }

        } catch (e) {
          alert(e);
        }
      };
  ...
}
Enter fullscreen mode Exit fullscreen mode

So far, the Angular barcode QR code scanning library is done. In the following sections, you will see how to use the library in an Angular application.

How to Build Angular Barcode QR Code Scanner with the Library

Since we have moved all heavy work to the library, building an Angular barcode QR code scanner becomes much simpler.

  1. In your Angular application workspace, install the Angular library via npm command in terminal:

    npm i ngx-barcode-qrcode-sdk
    

    As the installation is done, you need to configure the resource path in angular.json file.

    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        ...
        "assets": [
            "src/favicon.ico",
            "src/assets",
            {
            "glob": "**/*",
            "input": "./node_modules/dynamsoft-javascript-barcode/dist",
            "output": "assets/dynamsoft-javascript-barcode"
            }
        ],
        ...
    }
    
  2. Import the library in the app.module.ts file:

    import { NgxBarcodeQrcodeSdkModule } from 'ngx-barcode-qrcode-sdk';
    
    ...
    @NgModule({
      ...
      imports: [
        ...
        NgxBarcodeQrcodeSdkModule.forRoot({ licenseKey: "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==", resourcePath: "assets/dynamsoft-javascript-barcode/" }),
      ],
      ...
    })
    
    ...
    

    You need to apply for a 30-day free trial license key to activate Dynamsoft JavaScript Barcode Reader. The resource path should be the same as the one in the angular.json file.

  3. In your component *.ts file, inject the NgxBarcodeQrcodeSdkService and add the output event:

    import { NgxBarcodeQrcodeSdkService } from 'ngx-barcode-qrcode-sdk';
    ...
    export class FooComponent implements OnInit {
      barcodeResult: string = '';
      constructor(private barcodeQrCodeSdkService: NgxBarcodeQrcodeSdkService) {
      }
    
      ngOnInit(): void {
      }
    
      onResultReady(result: string): void {
        this.barcodeResult = result;
      }
    }
    
  4. Then in corresponding HTML file, include ngx-barcode-reader or ngx-barcode-scanner:

    Barcode Reader

    <div>
      <a>Barcode QR code decoding results: {{barcodeResult}}</a>
    </div>
    
    <ngx-barcode-reader
    (result)="onResultReady($event)"
    ></ngx-barcode-reader>
    

    Angular barcode QR code reader

    Barcode Scanner

    <div>
      <a>Barcode QR code decoding results: {{barcodeResult}}</a>
    </div>
    
    <ngx-barcode-scanner
    (result)="onResultReady($event)"
    ></ngx-barcode-scanner>
    

    Angular barcode QR code scanner

Source Code

https://github.com/yushulx/ngx-barcode-qrcode-sdk

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.