Angular Barcode Scanner

Runs in the browser

Add barcode scanning to your Angular app: fully client-side processing, no backend required!

Simple, transparent pricing

No large up-front commitment. Unlimited devices. Cancel anytime. Free 14-day trial.

Built for developers

Zero dependencies. Works with all frameworks. Great docs for humans and agents alike.

Quick start: scan with the Popup Scanner

The fastest way to scan a barcode in Angular. No component to write, just call PopupScanner.scan() from an event handler and await the result.

The Popup Scanner is a configurable modal dialog over your app and closes as soon as a matching barcode is read. It's intentionally light, but still configurable enough to fit your app:

Customizable labels for user guidance. Defaults are localized to the browser language.
Colors to match your app's branding.
Audio and vibration feedback on each scan.
Custom detectionHandler to validate codes, or to keep the dialog open until all required barcodes have been scanned.

Check out our Popup Scanner guide, or dive directly into the Angular sample code to get started.

BarcodeReader: Add an embeddable scanner to your Angular app

For more fine-grained control over the integration, embed a BarcodeReader in your Angular app.

When scanning is central to a screen, for example a stock-taking view with the camera on top and scanned items below, embed the scanner using the BarcodeReader API. Our sample component wraps the BarcodeReader with a Angular component and ties its lifecycle to the component's lifecycle.

For detailed sample code, refer to our Angular sample code on Github. The repository contains a sample component as well as examples for single, multiple and repeated scanning use cases.

Install and initialize

Install from NPM. Our SDK has zero dependencies, and we use Trusted and Staged Publishing.

➜ npm i @pixelverse/strichjs-sdk

Before scanning, you need to initialize the SDK with your license key:

await StrichSDK.initialize('your-license-key');

You'll need a license key: Start a free trial and create one in the Customer Portal. License keys are scoped to your app URLs: localhost and private IP ranges are always included, so local development works out of the box.

Trusted in production

“We tried a few libraries but accuracy was hit-or-miss. STRICH was a great solution with flexible payment options that allowed us to integrate easily with great SDK documentation and amazing support.”

Keshav Bantwal, SW Eng @ Orange Health Labs (YC 20)

“After struggling with other libraries we settled on STRICH. It excels reading barcodes in conditions that the other libraries simply cannot get a reading.”

Jukka Aittokallio, Senior SW Eng @ Reaktor

“STRICH is fast, reliable, easy to integrate, and has transparent and reasonable pricing. We came from Scandit and it was a constant battle to understand how and why we were being charged. Since moving to STRICH, we have not had to even think about it.”

Robynn Lobo-Pires, Full Stack Dev @ Volume7

Not convinced? See how companies like Brooklyn Public Library, Swiss Railways (SBB) and Zeercle use STRICH for their scanning processes, or read our article on Barcode scanning in web apps.

Angular tips

Implementation guidance and some common pitfalls to avoid.

Read our integration guide

We have an extensive Angular Integration Guide in our reference documentation if you prefer something to read before diving into the examples.

Initialize the SDK before the user needs it

Calling StrichSDK.initialize() before using PopupScanner or BarcodeReader. Initialization may perform an online license check, so be sure to do it as early as possible (app startup), so the scanner opens without delay.

Destroy the reader in ngOnDestroy

The BarcodeReader holds the camera. If it isn't destroyed on ngOnDestroy, the next initialization will fail because the camera is still in use. PopupScanner manages this automatically.

Initialize in ngAfterViewInit, not ngOnInit

BarcodeReader needs its host element to be in the DOM with a known size. That's only guaranteed once ngAfterViewInit has run, so creating the reader in ngOnInit won't work.

Keep the host element's size fixed

The scanner's container must use position: relative and a fixed size while scanning. Give it an explicit height (e.g. 300px) rather than letting it grow or shrink with the content around it, such as the list of scanned items.

Stop/start instead of remounting

For flows with user interaction between multiple scans, such as confirming each item, considering calling stop() and start() on the BarcodeReader. That way the camera stays open, and scanning resumes instantly.

Guard scanning routes

Route guards are the idiomatic way to enforce preconditions. The Angular sample uses two functional guards on every scanning route: one to enforce SDK initialization, and one that blocks navigating away while the BarcodeReader isn't destroyed.

Share scan results through the service

If several screens scan, let the service own the BarcodeReader and publish detections through an RxJS Subject or a signal. Components subscribe to results instead of managing the reader themselves. The sample's ScannerService shows this pattern

Lazy-load scanning routes

STRICH bundles its WebAssembly engine, so the SDK is a sizeable dependency. If scanning is only used on some screens, put them behind loadComponent or loadChildren so the SDK stays out of your initial bundle.

Scanning QR codes in Angular

Both integrations read QR codes, and all other supported types, through the same API. Enable QR codes with by configuring the 'qr' symbology. See supported barcode types for the full list.

Frequently asked questions

Is there an Angular component package?

STRICH has zero dependencies and works with any framework. The Popup Scanner needs no component at all, and the Angular sample code is all it takes to embed the scanner. Copy it into your project and adapt it, or tell your agent to do it.

Which Angular versions are supported?

Any recent Angular version works. STRICH doesn't place any requirements on the web framework it runs on.

Does it include TypeScript types?

Yes. The SDK ships with full TypeScript definitions.

Does it work with standalone components and signals?

Yes. The sample uses standalone components, and scan results can be written straight to signals.

Does it work with NgModule-based apps?

Yes. Declare or import the scanner component in your module like any other component.

Does it work with Ionic Angular?

Yes, in the browser and as a PWA.

Is there a free trial?

Yes, we offer a 14-day free trial. A credit card or PayPal is required to start the trial, but you won't be charged if you cancel before it ends.

How much does STRICH cost?

Plans start at €99/month for up to 10'000 scans, with unlimited devices and applications. Business and Enterprise licenses have flat annual pricing with unlimited scans and devices. See pricing.

Does barcode data leave the device?

No. Barcodes are decoded on the device, in the browser. The SDK only uses connectivity to perform license check and track usage, never barcode contents. Online license checks and usage tracking can both be disabled with add-ons in Business and Enterprise plans.

Which browsers are supported?

All major browsers on Android and iOS. The camera requires HTTPS (or localhost) and the decoding requires support for WebAssembly.

Still have questions? Check out the full FAQ.

Start your free 14-day trial today

Integrating STRICH into your web app typically takes less than a day. Or try our free demo app and convince yourself that STRICH meets your needs.

Launch demo app ↗ Start free trial ↗