In this tutorial discuss how to create an in-app browser on the ionic app.
Create blank project
$ ionic start MyIonicProject blank --type=ionic-angular
Then goto MyIonicProject folder and Install the Cordova and Ionic Native plugins
$ ionic cordova plugin add cordova-plugin-inappbrowserinstall npm package
$ npm install --save @ionic-native/in-app-browser@4Edit home.ts
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { InAppBrowser } from ‘@ionic-native/in-app-browser’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
constructor(public navCtrl: NavController,private iab: InAppBrowser) {
}
open(){
const browser = this.iab.create(‘https://www.w3schools.com/’, ‘defaults’, { location: ‘no’ });
browser.on(‘loadstart’).subscribe(event => {
});
browser.on(‘exit’).subscribe(event => {
browser.close();
});
}
}
Edit home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
In app browser
<p>
If you get lost, the <a href=“http://ionicframework.com/docs/v3”>docs</a>
</p>
<button ion-button block (click)=“open()”>w3school</button>
</ion-content>
Edit app.module.ts
import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { InAppBrowser } from ‘@ionic-native/in-app-browser’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘../pages/home/home’;
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Finally run
$ ionic cordova build android
$ ionic cordova run android
Follow up with high-quality video tutorial on YouTube
