Author - StudySection Post Views - 1,348 views
ionic browser

In-App Browser – Ionic


InAppBrowser plugin is used for opening a web browser inside Ionic and Cordova applications. With the help of this plugin, we can use web-based pages inside our application. To use this plugin, the following software must be installed on your machine:

  1. Node js
  2. Cordova
  3. Ionic

Create an ionic project using the following command:

npm install -g cordova
npm install -g ionic

ionic start myApp blank

Where myApp is your application name and ‘blank’ is the type of application you want to create. If you want an application with tabs on the bottom you can use ‘tabs’ instead of ‘blank’.

With the above command, your ionic application will be created. Now we are going to use InappBrowser. Instructions to use the plugin are given below:


ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser


  • AmazonFire OS
  • Android
  • Browser
  • iOS
  • macOS
  • Windows


Go to project > src > app > home where home is the default page created by Ionic.
Open file and add the following code:

<img class="logo" src="assets/images/logo.png">
<ion-content padding text-center>
<ion-button class="primary" shape="round" (click)="goTo()">
<ion-icon ios="ios-log-in" md="md-log-in">Google

Add following code in

import { Component } from '@angular/core';
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
selector: 'app-home',
templateUrl: '',
styleUrls: [''],
export class HomePage {
options : {
location : 'no',//Or 'no'
hidden : 'no', //Or 'yes'
clearcache : 'yes',
clearsessioncache : 'yes',
zoom : 'yes',//Android only ,shows browser zoom controls
hardwareback : 'yes',
mediaPlaybackRequiresUserAction : 'no',
shouldPauseOnSuspend : 'no', //Android only
closebuttoncaption : 'Close', //iOS only
toolbar : 'yes', //iOS only
fullscreen : 'yes',//Windows only
toolbarcolor: '#000000',
navigationbuttoncolor: '#ffffff',
hideurlbar: 'yes',
constructor(private iab: InAppBrowser) {}
let target = "_blank";
const browser =

To run the code, use the following command:

ionic serve


Above input will open the app in the browser and by clicking the Google button it will open the URL in the application.

Those who want to pursue their careers in the IT industry, our extensive and elaborated Computer Certification exam is available for both beginners and experts. This exam will help with a deep analysis of your skills in different functionalities of computer systems.

Leave a Reply

Your email address will not be published.