Display variable value from a Cordova plugin function/provider

Ionic Framework ionic-v3
1

Hi,

I’m trying to display an ID I retrieve from a Cordova plugin in my Ionic 2 application. The problem is that I can display it in the console log but I cannot figure out how to display it in the Ionic view.

Service/Provider code

  initiate(){
    let idNumber;

    this.Plugin.initialize(
      function(success){
        idNumber = (success);
        console.log(idNumber);
      },
      function(fail){
        console.log("Cannot retrieve Id. Please enable bluetooth.");
        this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.BLUETOOTH, this.androidPermissions.PERMISSION.BLUETOOTH]);
      }
    )
        return idNumber;
  }

Homepage.ts code

  ionViewDidLoad() {
    this.IdService.initiate();
  }

Homepage.html code

<ion-content padding>
  <p>Device id: {{IdService.initiate}}</p>
  <button ion-button (click)="synchronize()"></button>
</ion-content>

Help? :slight_smile:

2

Hello,

I am completly new to ionic and web things. So it is only a guess.

All examples I saw used a variable or a property to display in {{bla}}. So don’t know if a function is working. Maybe you can try to use a property or variable.

Best regards, anna

3

Do you mean the Ionic View app by that?
If so: Ionic View only supports a limited amount of plugins listed here: Ionic Docs - Ionic Documentation
To test your custom Cordova plugin you have to use ionic cordova run or a similar command to build your own app. (It’s not that difficult you once worked it out. Alternatively you can use Ionic Package to build in the cloud)

4

This is not going to work as you are trying to write it. It is impossible to synchronously return a value that is asynchronously generated.

If at all possible, please use the ionic-native shim for whatever this plugin is. Doing so will guide you naturally towards how to use the futures properly.

5

Sorry, to make it clear I mean the Ionic page rather than the Ionic View software haha. I’ve been testing on an actual device due to using my Cordova plugin.

1 Like
6

I am using a native Android SDK for my Cordova plugin, therefore use of Ionic Native isn’t possible. The value of the ID is returned in the console.log so why can’t I display it on my Ionic page? Can you help?

7

Hello,
I am new to all these things.
But I think you can bind only to property (variables). Have you tried to declare your idNumber outside of function and bind this

Device id: {{IdNumber}}

https://angular.io/guide/displaying-data (please, please be the correct angular)

Best regards, anna.

8

Hi Anna,

I’ve tried that too, it doesn’t work. I believe it has something to do with what @rapropos stated. I’m also new to Ionic but the Cordova plugin is the difficult part :sweat:

9

Hello,
okay let’s try something else. Give your element an Id

<p id="pwork">This Device id will overwriten </p>
```
add then  after

```
console.log(idNumber);
(<HTMLParagraphElement> document.getElementById('pWork')).innerHTML = "Device Id: " + idNumber)
```
If innerHtml is not working you can try textcontent.

I use this in a similar case.

best regards, anna
10

My work colleague helped me figure it out. @rapropos was right. I needed to make my function a promise. So…
Service/Provider code

  initiate():Promise<string>{

    return new Promise((resolve, reject) => {
        thisPlugin.initialize(
      function(ID){
        resolve(ID)
        console.log(ID);
      },
      function(fail){
        reject("Cannot retrieve Id. Please enable bluetooth.")
        console.log("Cannot retrieve Id. Please enable bluetooth.");
      }
    )
    })
  }

home.ts

  ID: string;

  ionViewDidLoad() {
    this.getId();
  }

  getID(){
    this.IdService.initiate().then(ID=> 
    {
      this.ID= ID;
    }).catch(error => {
      console.log(error)
    }
    )
  }

home.html

  <p>Device id: {{deviceId}} </p>
1 Like