Ionic 2/3 Tips

ionic-tips.md

Ionic Quirks

Fix Stray Pixel under ion-header:

Remove the content prop from the the element.

Ion Header:

The Ion Header component can cause some irregular behavior. It's often better to delete it and use a regular <header> tag. Put it inside of the <ion-content> component at the top.

iOS Fixes

Fix iOS Status Bar Overlap:

ionic cordova plugin rm cordova-plugin-statusbar

ionic cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

Fix iOS Keyboard Covering Inputs:

Source: ionic-team/ionic-framework#7149 (comment)

Make sure that the Ionic Keyboard is installed first:

ionic cordova plugin add ionic-plugin-keyboard

npm install --save @ionic-native/keyboard

Next, add Keyboard to the app.module.ts imports and providers, then to the app.component.ts imports;

The import: import { Keyboard } from '@ionic-native/keyboard';

Add the following to app.component.ts:

Add public keyboard: Keyboard to the constructor.

Inside of the platform.ready function:

if (this.platform.is('ios')) {
	let appEl = <HTMLElement>document.getElementsByTagName('ION-APP')[0], appElHeight = appEl.clientHeight;

this.keyboard.disableScroll(true);

window.addEventListener('native.keyboardshow', e => {
  appEl.style.height = appElHeight - (<any>e).keyboardHeight + 'px';
});

window.addEventListener('native.keyboardhide', () => {
  appEl.style.height = '100%';
});

}

Android Fixes

Fix Gradle:

You should probably just start crying now ¯_(ツ)_/¯

Deeplinking

Primer on how it works: https://www.youtube.com/watch?v=7qnapNnX-WI

Use codepen.io to test your app links. See my example here.

Android: Associate Website

From Android Studio, click Tools > App Links Assistant. In the new dialogue box, under #3 Associate website, click the Digital Asset Links File Generator and follow the steps to putting that file on the server.