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'


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

    export class BrowserOpener {

      constructor(private iab: InAppBrowser) { }


    openURL(){
      const browser = this.iab.create('https://google.com', '_system' );
       browser.close();
     }
    }

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


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


    @NgModule({
      . . .
      . . .
    providers: [..,InAppBrowser,...]
    })

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

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
            Open Browser
        </ion-title>
    </ion-navbar>
</ion-header>

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

        </ion-card-content>
    </ion-card>

</ion-content>
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 me@matthiasomisore.com.

Be the first to comment

Leave a Reply

Your email address will not be published.


*