Ionic 2 and Barcode plugin

Ionic Framework ionic-v3
1

Hi,
I’m trying to get the phonegap-plugin-barcodescanner to work with ionic 2.
This is the code I’m trying to use.

import {Page, NavController} from ‘ionic-framework/ionic’;
import {ItemDetailsPage} from ‘…/item-details/item-details’;

@Page({
templateUrl: ‘build/pages/getting-started/getting-started.html’
})

export class GettingStartedPage {
nav:NavController;

constructor(nav:NavController) {
    this.nav = nav;
}

scan() {
    var me = this;
    if (window.cordova) {
        cordova.plugins.barcodeScanner.scan((imageData) =>
                me.nav.push(ItemDetailsPage, {
                        itemid: imageData.text
                    }
                )
            , (error) =>
                alert("An error happened -> " + error)
        );
    }

}

}

The Idea was to read the barcode and send the value to another page to show some details about the item.
Trying it on my Nexus 5 I don’t see any errors on the adb.

Best Regards,
Duarte

2

Are you sure the “if (window.cordova)” line is true?

The community really needs to lean on the Ionic team to put together a tutorial on how to include cordova plugins that don’t already have native Ionic2 support. I’ve been scouring the internet to figure this out, and am still forced to use Ionic v1 because of this limitation.

Good luck sir,
-Orby

3

Hi,
The line is true because I can do the scanning and if i just do an alert with the imagedata.text it works.
I just can’t get the navigation to change.

Best,
Duarte

4

Try this:

    if (cordova.plugins.barcodeScanner) {
        cordova.plugins.barcodeScanner.scan((imageData) => {
			this.nav.push(ItemDetailsPage, {
					itemid: imageData.text
				}
			)       	
        }, (error) => {
			alert("An error happened -> " + error);       	
        });
    }

I’ve added some braces around your fat arrow function, and also changed the if condition since it would make more sense to check for the existence of the barcode scanner object. Also, since you are using fat arrow functions, there is no need to create a reference to ‘this’ because it will use the parents scope anyway.

5

Hi,
It just goes back to the previous page after reading the barcode.
I’m running out of ideas…

6

I’m developing with this plugin also. It seems that the view does not update at all. I wish I could help but the only thing I could come up with is doing everything inside the same view you started in, even then nothing updates automatically. I wonder if there is a similar way to force the view to update like in angular 1 $scope.apply()

7

Hi,

Did you manage to resolve the issue you encountered? I have the same issue too. The model is not directly updated.

8

Do:
import {ChangeDetectorRef} from ‘angular2/core’

constructor(private ref: ChangeDetectorRef)

when you finish changing data: this.ref.detectChanges();