Ionic2 – Using InAppBrowser to load a web browser

Simple example on how to open a url directly from your Ionic2/Cordova application using Ionic Native InAppBrowser plugin.

1. Enter below code in your component:

import { Component} from '@angular/core';
    import { NavController} from 'ionic-angular';
    import { InAppBrowser} from '@ionic-native/in-app-browser'

      selector: 'browser-page',
      templateUrl: 'templateUrl: 'build/pages/hello-ionic/browser-page.html'})

    export class BrowserOpener {

      constructor(private iab: InAppBrowser) { }

      const browser = this.iab.create('', '_system' );

2. Add ‘InAppBrowser’ as a provider in your’s apps module providers:

    import { InAppBrowser} from '@ionic-native/in-app-browser'

      . . .
      . . .
    providers: [..,InAppBrowser,...]

3. Then in your template, call the method to load the url:

    <ion-navbar color="secondary">
            Open Browser

<ion-content padding>
            <button ion-button full (click)="openURL()">Open Button</button>


Review Article

About Matthias 33 Articles
I am a Software Engineer from Houston, TX who love to write codes that brings great ideas to live. In my professional life, I have created software for different industries including Oil & Gas, Finance, Service Provider, Cloud Computing and Embedded Systems. When not writting codes, i enjoy travelling, good music and photography. You can reach me at

Be the first to comment

Leave a Reply

Your email address will not be published.