In App Browser Using Ionic 3 & Angular 5

ionic g page inappbrowser

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

 

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { TabsPage } from '../pages/tabs/tabs';

import { QrscannerPage } from '../pages/qrscanner/qrscanner';

import { LocalNotificationPage } from '../pages/local-notification/local-notification';

import { GeolocationPage } from '../pages/geolocation/geolocation';

import { InappbrowserPage } from '../pages/inappbrowser/inappbrowser';

import { ModalPage } from '../pages/modal/modal';

import { LoginPage } from '../pages/login/login';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { LocalNotifications } from '@ionic-native/local-notifications';

import { Geolocation } from '@ionic-native/geolocation';

import { RestProvider } from '../providers/rest/rest';

import { HttpClientModule } from "@angular/common/http";

import { CommonProvider } from '../providers/common/common';

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

@NgModule({

  declarations: [

    MyApp,

    HomePage,

    LoginPage,

    TabsPage,

    ModalPage,

    QrscannerPage,

    LocalNotificationPage,

    GeolocationPage,

    InappbrowserPage

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    IonicModule.forRoot(MyApp),

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    HomePage,

    LoginPage,

    TabsPage,

    ModalPage,

    QrscannerPage,

    LocalNotificationPage,

    GeolocationPage,

    InappbrowserPage

  ],

  providers: [

    StatusBar,

    SplashScreen,

    LocalNotifications,

    Geolocation,

    { provide: ErrorHandler, useClass: IonicErrorHandler },

    RestProvider,

    CommonProvider,

    QRScanner

  ]

})

export class AppModule { }

import { Component, ViewChild } from '@angular/core';

import { Nav, Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

import { LoginPage } from "../pages/login/login";

import { TabsPage } from "../pages/tabs/tabs";

import { QrscannerPage } from '../pages/qrscanner/qrscanner';

import { LocalNotificationPage } from '../pages/local-notification/local-notification';

import { GeolocationPage } from '../pages/geolocation/geolocation';

import { InappbrowserPage } from '../pages/inappbrowser/inappbrowser';

@Component({

  templateUrl: 'app.html'

})

export class MyApp {

  @ViewChild(Nav) nav: Nav;

 

  rootPage: any = LoginPage;

 

  pages: Array<{ title: string, component: any }>;

 

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {

    this.initializeApp();

 

    // used for an example of ngFor and navigation

    this.pages = [

      { title: 'Home', component: HomePage },

      { title: 'Tabs', component: TabsPage },

      {

        title: 'QR Scanner', component: QrscannerPage

      },

      { title: 'Local Notification', component: LocalNotificationPage },

      { title: 'Geolocation', component: GeolocationPage },

      { title: 'In App Browser', component: InappbrowserPage }

 

    ];

  }

 

  initializeApp() {

    this.platform.ready().then(() => {

      // Okay, so the platform is ready and our plugins are available.

      // Here you can do any higher level native things you might need.

      this.statusBar.styleDefault();

      this.splashScreen.hide();

    });

 

  }

 

  openPage(page) {

    // Reset the content nav to have just this page

    // we wouldn't want the back button to show in this scenario

    this.nav.setRoot(page.component);

  }

}

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

mport { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { QrscannerPage } from '../pages/qrscanner/qrscanner';
import { LocalNotificationPage } from '../pages/local-notification/local-notification';
import { GeolocationPage } from '../pages/geolocation/geolocation';
import { InappbrowserPage } from '../pages/inappbrowser/inappbrowser';
import { ModalPage } from '../pages/modal/modal';

import { LoginPage } from '../pages/login/login';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LocalNotifications } from '@ionic-native/local-notifications';
import { Geolocation } from '@ionic-native/geolocation';
import { InAppBrowser } from '@ionic-native/in-app-browser';

import { RestProvider } from '../providers/rest/rest';
import { HttpClientModule } from "@angular/common/http";
import { CommonProvider } from '../providers/common/common';

import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner';

@NgModule({
declarations: [
MyApp,
HomePage,
LoginPage,
TabsPage,
ModalPage,
QrscannerPage,
LocalNotificationPage,
GeolocationPage,
InappbrowserPage
],
imports: [
BrowserModule,
HttpClientModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage,
TabsPage,
ModalPage,
QrscannerPage,
LocalNotificationPage,
GeolocationPage,
InappbrowserPage
],
providers: [
StatusBar,
SplashScreen,
LocalNotifications,
Geolocation,
InAppBrowser,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
RestProvider,
CommonProvider,
QRScanner
]
})
export class AppModule { }

<!--
Generated template for the InappbrowserPage page.

See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>In App Browser Example</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<div padding>
<button ion-button color="primary" block (click)="launchData()">Launch</button>
</div>
</ion-content>

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

/**
* Generated class for the InappbrowserPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: 'page-inappbrowser',
templateUrl: 'inappbrowser.html',
})
export class InappbrowserPage {

URL: string = 'https://ionichelperblog.blogspot.com'; // Full path of URL
TARGET: string = '_blank'; // Target in which load the URL....Default target is _self
OPTIONS: InAppBrowserOptions = {
location: 'yes', // Location bar to ON or OFF
zoom: 'yes', // Android only...It shows zoom controls in browser
clearcache: 'yes',// To clear browser's cookie cache before opening of new window in browser
clearsessioncache: 'yes', // It will clear all sessions before opening of window in browser
hardwareback: 'yes', // to show default device back button

}

constructor(public navCtrl: NavController, public navParams: NavParams, private iab: InAppBrowser) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad InappbrowserPage');
}

launchData() {
this.iab.create(this.URL, this.TARGET, this.OPTIONS);
}

}