Return to site

Ionic 2 RC4 and InAppBrowser

How-To

Hi Everyone!

Here's some help with this from experience with Ionic 2 RC 4 and latest Angular 2 as of 12/31/2016:

0. Build a brand new v2 app: $ ionic start MyApp blank --v2

1. make sure you have installed the Ionic 2 native (ref: http://ionicframework.com/docs... then go to native > inappbrowser page)
$ ionic plugin add cordova-plugin-inappbrowser

2. Make sure you have imported in your src/app/app.component.ts:
import { InAppBrowser } from 'ionic-native';

3. your template/view .html should be something like typical: *************************

<ion-content class="home">
<div class="top-header center">
<ion-icon name="alert"></ion-icon>

<h3>
My Own App
</h3>
</div>

<div class="center">
<button ion-button="" large="" color="primary" (click)="launchUrl()">Go To Lisaiceland Site</button>
</div>
</ion-content>

4. Your .ts file should like something typical: *************************

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
import { InAppBrowser } from 'ionic-native';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(public navCtrl: NavController, public platform: Platform) {
this.platform = platform;
}

launchUrl() {
this.platform.ready().then(() => {
let ref = new InAppBrowser('http://lisaiceland.com/',
'_blank');
ref.on('exit').subscribe(() => {
console.log('Exit In-App Browser');
});
});
}

}

5. save and run in ionic lab ($ ionic serve --lab) to emulate and it should work. Will NOT work in Ionic View though.

 

6. Build iOS .ipa or Android .apk (android-debug.apk in dev) and run on a PHYSICAL android device and it'll work. I just built it to test just now!

I was very frustrated with all the examples on the net and in stackoverflow no working with a full example.
Thnx.

Happy New Year Everybody! Happy 2017!

Bless.

Lis

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly