Ionic InAppBrowser Plugin

InAppBrowser plugin is used to open external links from your app inside a web browser view. We can show helpful articles,
videos, and web resources inside of our app. Users can view web pages without leaving your app. The InAppBrowser window behaves like a standard web browser, and can’t access Cordova APIs.
For this reason, the InAppBrowser is recommended if you need to load third-party (untrusted) content, instead of loading that into the main Cordova web view. The InAppBrowser is not subject to the whitelist, nor is opening links in the system browser.

The InAppBrowser provides by default its own GUI controls for the user (back, forward, done).

In this example we are creating apps, we have simple checkbox and button. When page load next button is disabled, it will able or active only when a user clicked on the checkbox, which will display a web page of https:ionic.io/tos on top of our current apps window.
Screen shot of our apps:-

Step 1 ionic start inAppBrowse blank –v2
Step 2
$ ionic plugin add –save cordova-plugin-inappbrowser
$ npm install –save @ionic-native/in-app-browser

Step 3: Open /config.xml in the project folder and insert the following code under

<access origin="*"/>
<allow-navigation href="http://*/*"/>
<allow-navigation href="https://*/*"/>  

In home.html we have

<ion-checkbox>

the component is clicked on, it will trigger the openTOS() method, which will open the URL via InAppBrowser. The Next Button is disabled by default (via the readTOS variable). So when openTOS() method is called, it will change the value of the button to true. Which allows us to click on next button is enabled.

Step 4: Add the following code in home.html

<ion-header> ...In App Browser ...</ion-header>
 
<ion-content class="home">
  <div class="top-header center">
    <ion-icon name="alert"></ion-icon><br/>
    <h3>Important Information</h3>
  </div>
  <ion-item>
    <ion-label>Please agree to our terms</ion-label>
    <ion-checkbox dark (click)="openTOS()"></ion-checkbox>
  </ion-item>
  <div class="center">
    <button ion-botton class="long" [(disabled)]="!readTOS" (click) = "agreedFunction()">Next</button>
  </div>
</ion-content>

Step 5: Add the following code in home.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { NavController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private platform: any;
  public readTOS: Boolean = false;
 
  constructor(public navCtrl: NavController, private iab: InAppBrowser, platform: Platform) {
    this.platform = platform;
  }
 
  openTOS() {
    this.readTOS = !this.readTOS;
    this.platform.ready().then(() => {
      const browser = this.iab.create('https://ionic.io', '_blank', "location=yes");
      browser.show();
 
    });
  }
 
  agreedFunction(){
        alert("I m not on way");
  }
}

Step 6: Add the following code in home.scss

.home{
    .item-inner{
        border-bottom: 0;
    }
}
 
.top-header{
    margin-top: 50px;
    margin-bottom: 50px;
     
    ion-icon{
        color:#EB6B56;
        font-size: 100px;
    }
    h3{
        color: #75706B;
    }
}
 
.center{
    text-align: center;
}
 
.long{
    padding: 0 5em;
}