The Angular framework is supported by Scandit technology and the purpose of the following article is to facilitate the integration and setting up of your Angular application alongside Scandit SDK.

Create a new project (optional)

If you still do not have a Angular project that you will use, you should create a new one.

$ ng new helloscandit

$ cd helloscandit

Add needed Scandit plugins

Add the Core and Barcode plugins (as described in our documentation).

$ npm install scandit-web-datacapture-core

$ npm install scandit-web-datacapture-barcode

You also need to add the library engine files and provide an appropriate path under the `libraryLocation` parameter.

You can either add needed files locally or use CDN. For the purpose of this guide, we'll use the CDN link, as shown below.

Create a new component

Create a new component called `scanner` by running the following command:

$ ng generate component scanner

Add the following code snippets to the component's files:

- `scanner.component.html`

<div id="data-capture-view"></div>

- `scanner.component.ts`

import { Component, OnInit } from '@angular/core';

import * as SDCCore from 'scandit-web-datacapture-core';
import * as SDCBarcode from 'scandit-web-datacapture-barcode';

@Component({
 selector: 'app-scanner',
 templateUrl: './scanner.component.html',
 styleUrls: ['./scanner.component.css']
})

export class ScannerComponent implements OnInit {

 constructor() { }

 async ngOnInit(): Promise<void> {
   await SDCCore.configure({
     licenseKey: "YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE",
     libraryLocation: "https://cdn.jsdelivr.net/npm/scandit-web-datacapture-barcode@6.x/build/engine/",
     moduleLoaders: [SDCBarcode.barcodeCaptureLoader()]
   });

   const context = await SDCCore.DataCaptureContext.create();

    const camera = SDCCore.Camera.default;
    await context.setFrameSource(camera);

    const settings = new SDCBarcode.BarcodeCaptureSettings();
    settings.enableSymbologies([
      SDCBarcode.Symbology.Code128,
      SDCBarcode.Symbology.Code39,
      SDCBarcode.Symbology.QR,
      SDCBarcode.Symbology.EAN8,
      SDCBarcode.Symbology.UPCE,
      SDCBarcode.Symbology.EAN13UPCA
    ]);

    const symbologySetting = settings.settingsForSymbology(SDCBarcode.Symbology.Code39);
    symbologySetting.activeSymbolCounts = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

    const barcodeCapture = await SDCBarcode.BarcodeCapture.forContext(context, settings);
    await barcodeCapture.setEnabled(false);

    barcodeCapture.addListener({
      didScan: async (barcodeCapture, session) => {
        await barcodeCapture.setEnabled(false);
        const barcode = session.newlyRecognizedBarcodes[0];
        const symbology = new SDCBarcode.SymbologyDescription(barcode.symbology);
        alert("Scanned: "+barcode.data+" "+symbology.readableName);
        await barcodeCapture.setEnabled(true);
      },
    });


    const view = await SDCCore.DataCaptureView.forContext(context);
    view.connectToElement(document.getElementById("data-capture-view")!);
    view.addControl(new SDCCore.CameraSwitchControl());

    const barcodeCaptureOverlay = 
      await SDCBarcode.BarcodeCaptureOverlay.withBarcodeCaptureForViewWithStyle(
      barcodeCapture,
      view,
      SDCBarcode.BarcodeCaptureOverlayStyle.Frame
    );

    const viewfinder = new SDCCore.RectangularViewfinder(
      SDCCore.RectangularViewfinderStyle.Square,
      SDCCore.RectangularViewfinderLineStyle.Light
    );
    await barcodeCaptureOverlay.setViewfinder(viewfinder); 

    await camera.switchToDesiredState(SDCCore.FrameSourceState.On);
    await barcodeCapture.setEnabled(true);
  }
}

Reference Scanner component

If you created your app without routing, you can add the routing module by running the following command:

$ ng generate module app-routing --flat --module=app

Once it's ready, you can reference the Scanner component in the `app-routing.module.ts` file by adding the below code snippet:

...
import { Routes } from '@angular/router';
import { ScannerComponent } from './scanner/scanner.component';

const routes: Routes = [
 { path: 'scanner', component: ScannerComponent }
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
...

Add a button on the main page to navigate to the Scanner component by adding the below code snippet in the `app.component.html` file:

<h1>Scandit WebSDK 6 Angular Sample</h1>
<button [routerLink]="'scanner'"> Open Scanner </button>
<router-outlet></router-outlet>

You can also add some styling to the main page in the `app.component.css` file, e.g.:

button {
 background-color: #555;
 color: white;
 font-size: 2vh;
 font-family: inherit;
 box-sizing: border-box;
 padding: 2vh 5vh;
 margin-top: 5vh;
 margin-bottom: 5vh;
 max-width: 20vw;
 margin-left: 40vw;
 }

h1 {
 text-align: center;
}

Set the license key

Replace the `YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE` string with your web license key under `src/app/scanner/scanner.component.ts`.

Run the app

Run the app with `ng serve`. At this point you should be able to see a working scanner at `localhost:4200`.