IONIC APP – Open External Links In Mobile Browser


Ionic apps are developed with angular code, so people start using ng-href to point to URLs which has {{}} variables whose value will be dynamically loaded. With ng-href IONIC treats the links like internal links and hence opens them within the application itself. To solve this, we make use of onclick and methods.

Note: Am using Windows 7 to illustrate this tutorial.


In this tutorial I’ll show you the exact code you need to do this effectively: To open the external URL in mobiles browser.

Step 1: You need node.js installed on your computer.
Step 2: Install cordova and ionic

npm install ionic -g
npm install cordova -g

Step 3: Install inappbrowser plugin

cordova plugin add


cordova plugin add org.apache.cordova.inappbrowser

Step 4: Insert the code in your view (html files)

<a class="button button-assertive" 
   ng-href="http:// url .com/{{id}}/discount"
   onclick=', "_system", "location=yes"); return false;'>

This way, the variables in the ng-href interpolates and then is being inserted as first parameter to method.

IONIC APP – Open External Links In Mobile Browser

You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: [Watch the Video In Full Screen.]

Loads in the system browser:‘’, ‘_system’);
Loads in the InAppBrowser:‘’, ‘_blank’);
Loads in the InAppBrowser with no location bar:‘’, ‘_blank’, ‘location=no’);
Loads in the Cordova web view:‘’, ‘_self’);

Example App:
You can see how the URLs open in the mobile browser in this app

4 thoughts on “IONIC APP – Open External Links In Mobile Browser”

  1. Thank you for this tutorial, but unfortunately this isn’t working for me, when testing on a device it doesn’t do anything, nothing opens. Is this still working on the current version of ionic and inappbrowser?

  2. To be clear,

    We must add:
    1. to config.xml

    <access origin="*"></access>

    2. to index.html

    <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

    3. install WhiteList plugin


Leave a Reply

Your email address will not be published. Required fields are marked *