A Simple Example for How to Open URLs in Browser with Ionic 2+, Cordova InAppBrowser Plugin and Ionic Native -- Words (529)

Ionic
Cordova InAppBrowser example with Ionic 2 final and Ionic Native

Throughout this tutorial, we are going to see a detailed example showing how to open URLs in Ionic 2+ mobile apps using the Cordova plugin InAppBrowser and Ionic Native 3.x+.

SEE ALSO:

Full Ionic 2/Ionic 3 mobile app with Ionic Native 3.x and InAppBrowser

and

Ionic 2/3: Using Cordova SQLite and Barcode Scanner Plugins to Build a Product Inventory Manager

Now lets get started.

We will start by generating a new Ionic 2+ project with Ionic CLI so open up your terminal if your are developing under a Linux/MAC system or your command prompt under Windows then type.

ionic start ionic2-inappbrowser-example blank  

N.B: Under Windows the recommended way to work with Ionic 2+ is through visual studio.

Next navigate inside your project folder

cd ionic2-inappbrowser-example

And add your target platform with

cordova platform add android 

I'm developing under a Ubuntu system so I can only target Android devices. If you are under a MAC you can target iOS too with

cordova platform add iOS

N.B: If you don't have cordova already installed you can easily install it via npm with

npm install -g cordova 

Next, you just need to add InAppBrowser with

cordova plugin add cordova-plugin-inappbrowser

Now we are ready to add some code to our project to open external URLs, so go ahead and open home.ts and modify it to look like:

import { Component } from '@angular/core';

import { NavController , Platform} from 'ionic-angular';

import { InAppBrowser } from 'ionic-native';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor( public platform: Platform,public navCtrl: NavController) {

}
openUrl() {

        this.platform.ready().then(() => {
            let browser = new InAppBrowser("https://www.techiediaries.com",'_blank');

        });
}    
}

So as you can see, we have started by importing the InAppBrowser plugin from ionic-native module then we have added the openUrl() method that will handle opening the specified url.

Next open your template and add a button to trigger the method

N.B: Don't use the old .open() method

 InAppBrowser.open(url, "_system");

Many developers are getting this error

Uncaught Error: Can't resolve all parameters for InAppBrowser: (?, ?, ?).

Because it is deprecated with Ionic Native. Instead you should use

let browser = new InAppBrowser('YOUR_URL', "_system");

Next just execute

ionic serve 

To play with your demo on the browser at http://localhost:8100/

Cordova InAppBrowser example with Ionic 2 final and Ionic Native

When you are finished testing build your app for you target platform with

ionic build android | iOS

You can also find the example app in GitHub{target:_blank}



mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.