[Ionic2] Device Interaction in an Ionic App with Cordova Plugins

Posted 2020-08-16 Answer1215

In this lesson, we are going to learn how to interact with native components through Cordova plugins. We will walk through how to add a Cordova plugin to our application and use it to interact with our native device. In this case, we are going to install a plugin that will allow us to open URLs in a mobile browser from within our Ionic app.

 

When you use a link to open a webpage in mobile ionic app, you will find there is no way back to the app.

<a href="https://google.fi">Go Google, you cannot come back this app any more</a>

 

To solve that problem, we need to install a plugin:

npm i --save-dev cordova-plugin-inappbrowser

 

To check whether the plugin was successfully installed, you can do:

ionic plugin

it will list all the plugins you have installed fot the application.

 

Now, let‘s try to open the link in browser instead of from app:

  <a href="https://google.fi">Go Google, you cannot come back this app any more</a>
  <button ion-button color="secondary" (click)="openInAppBrowser()">Open in browser</button>

  openInAppBrowser(){
    const url = "https://www.google.fi";
    window.open(url, ‘_system‘);
  }

 

Now upload the application to ionic view:

ionic upload

 

From the mobile phone, sync to latest version.

And we can confrim that, when we click the button, this time, mobile will open the browser to display the page.