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. 🎉