Skip to main content

Frequently Asked Questions

How can I create an Ionic app that uses the Datalogic plugin?

Here's directions to create an app using Ionic, Angular, and Cordova that can receive barcode data, starting from scratch, without Ionic already installed.

Create a directory for your app

mkdir DecodeListener
cd DecodeListener

Install the latest version of Ionic

For this example, version 5.4.4 was found and installed.

npm install -g ionic@latest

Create a new blank app

 ionic start DecodeListenerSample blank

When prompted for a framework, I chose Angular for this example.

Make sure the app works

Requires native-run to be installed. Let's setup the app and verify it works before adding the Datalogic plugin.

cd DecodeListenerSample
npm i -g native-run
ionic cordova run android --device

Add datalogic cordova plugin

ionic cordova plugin add @datalogic/cordova-plugin-datalogic

Add barcode handling code

Open app.component.ts. Add this line after your last import:

declare let barcodeManager: any;

Next, add this code at the end of your initializeApp() method:

barcodeManager.addReadListner(
(data) => {
alert(data);
},
(err) => {
console.log('ERR');
}
);

The blank Ionic app includes a hyperlink. If the device's Keyboard Wedge mode is turned on, it could annoyingly trigger the hyperlink, so let's remove it. Open src/app/home/home.page.html and remove the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> code.

Restart app on device

ionic cordova run android --device

Scan a barcode

When you scan a barcode, using the app you will get an alert message similar to this:

Barcode alert

That's it. Start customizing your app to your liking. 🎉