In App Browser – CodeZoon

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-inappbrowser

install npm package

$ npm install --save @ionic-native/in-app-browser@4

Edit 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

Leave a Reply Cancel reply