How to Use JavaScript Barcode SDK in AngularDart Project

AngularDart, similar to Angular built with TypeScript, is a web app framework written in Dartlang. It finally compiles to JavaScript.  In this article, I will share how to use Dynamsoft JavaScript Barcode SDK to create a simple web barcode reader app using AngularDart on Windows 10.

Download and Installation

    pub global activate webdev
    pub global activate stagehand

Building Web Barcode Reader in AngularDart

Create a new project:

mkdir barcode
cd barcode
stagehand web-angular
pub get

Here is the project view in Visual Studio Code.

AngularDart project

By default, the template contains a to-do list component. It is useless, just delete it. After that, clean up the project:

  1. Open lib/app_component.html to delete <todo-list></todo-list>.
  2. In lib/app_component.dart, remove import ‘src/todo_list/todo_list_component.dart’ and directives: [TodoListComponent].

It is time to write my code. Open web/index.html to include the JS barcode library and add the initialization code:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" type="image/png" href="favicon.png">
    <img src="loading.gif" style="margin-top:10px" id="anim-loading">
    <script src="\_wasm/js/dbr-"></script>
    <script defer src="main.dart.js"></script>
        dynamsoft.dbrEnv = dynamsoft.dbrEnv || {};
        dynamsoft.dbrEnv.resourcesPath = '\_wasm/js';
        dynamsoft.dbrEnv.licenseKey =
        dynamsoft.dbrEnv.bUseWorker = false;
        dynamsoft.dbrEnv.onAutoLoadWasmSuccess = function() {
          document.getElementById('anim-loading').style.display = 'none';
        dynamsoft.dbrEnv.onAutoLoadWasmError = function(ex) {

Add an HTMLInputElement and an HTMLDivElement to lib/app_component.html:

    <input id="uploadImage" type="file" accept="image/bmp,image/jpeg,image/png,image/gif" (input)="readBarcode()">
<div><b>Barcode result:</b> <span id='barcodeResults'>{{results}}</span></div>

Now let’s do some tricky things in lib/app_component.dart.

To interop JavaScript with Dart, we can import ‘package:js/js.dart’:

library app_component;

import 'package:js/js.dart';

To make the package work, add dependency js: ^0.6.0 in pubspec.yaml:

  angular: ^5.1.0
  angular_components: ^0.10.1
  js: ^0.6.0

Declare the JavaScript barcode class and the decoding method:

import 'dart:js';
import 'dart:html';
import 'dart:convert';

class DynamsoftBarcodeReader {
  external factory DynamsoftBarcodeReader();
  external Promise<JsArray> decodeFileInMemory(File file);

Initialize the object:

class AppComponent implements OnInit {
  final title = 'Angular Dart - Barcode Reader';
  String results = '';
  DynamsoftBarcodeReader reader;

  void ngOnInit() async {
    results = '';
    reader = new DynamsoftBarcodeReader();

Create a readBarcode() function binding with the HTMLInputElement:

void readBarcode() {
    InputElement input = document.querySelector('#uploadImage');
    FileList files = input.files;
    File file = files.item(0);

    if (reader != null) {
    } else {
      results =;

The decodeFileInMemory method returns a Promise object, so we need to declare it as follows:

class Promise<T> {
  external Promise then(Function(T result));

The getResults() is a callback function for showing results:

void getResults(JsArray barcodes) {
    int len = barcodes.length;
    var json = jsonDecode(stringify(barcodes));
    var tmp = '';
    for (int i = 0; i < len; i++) {
      tmp += json\[i\]\['BarcodeText'\] + '; ';

    SpanElement spanElement= document.querySelector('#barcodeResults');
    spanElement.text = tmp;

Run the app:

webdev serve

If the port is unavailable, kill the relevant process:

netstat -aon | findstr 8080
taskkill /f /pid <ProcessID>

AngularDart barcode reader

Source Code

Search Blog Posts