lxieyang / ionic-showcase

Showcase - a practical guide on how to do a side menu app using ionic 2

Components

Highlight menu item

Follow the tutorial here.

Prevent white screen after splash screen

Add the following line to your config.xml file:

<preference name="AutoHideSplashScreen" value="false" />

Image viewer

Follow the link here.

Basically, run the following command:

$ npm install --save ionic-img-viewer

Then, for ionic 2.x or up:

import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  imports: [
    IonicImageViewerModule
  ]
})
export class AppModule {}

To use:

<img src="IMAGE_URL" imageViewer />

In app browser

Follow the link in the doc.

To install:

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

To add the plugin to your app's module:

...

import { InAppBrowser } from '@ionic-native/in-app-browser';

...

@NgModule({
  ...

  providers: [
    ...
    InAppBrowser
    ...
  ]
  ...
})
export class AppModule { }

To use:

import { InAppBrowser } from '@ionic-native/in-app-browser';

export class ContactPage {

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

  showFacebook() {
    const browser = this.iab.create("https://www.facebook.com/profile.php?id=100000519299083");
    browser.show();
  }
  
}

Tricks

Splash Screen Spinner

To control the appearnace of the splash screen spinner, add the following line to your config.xml file:

<preference name="ShowSplashScreenSpinner" value="false"/>

Change App name

Note that on iOS, you are not allowed to dynamically change the app name, you have to run the following command after you changed the app name in config.xml:

$ cordova plugin save
$ cordova platform rm ios
$ cordova platform add ios