Ionic keyboard and ngIf work not as expected

Hi all,

I have issue with:

  • Keyboard show/hide event (i’m using ionic keyboard)
  • Angular js 2 *ngIf to show/hide button in navigation bar when keyboard show/hide


  • I’m using ionic v2 to build application. My app have 3 tab bars (like default ionic app when run command ionic start).
  • In first tab, I add 2 buttons in navigation bar using one button is “start” type, other is “end” type. The “start” type button is Cancel button. Also have for input value.
  • My requirement is when user tap inside field, keyboard will show. When keyboard show, I’m using *ngIf to show button (Cancel button). And when keyboard hide, I’ll hide button.

Everything works fine in iOS’s devices. But in Android, it works not as expected. The first time I tap field, button Cancel not show (keyboard show up already), then I tap outside field, keyboard hidden and Cance button show up, not as I expected.

Steps to reproduce:
I’m commit source code into:

  1. npm install
  2. ionic platform add ios/android
  3. build app into android device.
  4. In Home tab, tab Input number field to show device’s keyboard, button Cancel not show (I expected it show up)
  5. Tap outside Input number field to hide keyboard, button Cancel show up.

Which Ionic Version? CLI v2.0.0-beta.32

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v6.2.1
Xcode version: Xcode 7.3.1 Build version 7D1014

I’m testing in
iPhone 5s, iOS 8.4: OK
iPad mini 3, iOS 9.3.1: OK
Nesus 7, Android 5.0.2: NG

Is anyone have this issue before?

Issue is resolved. Solution here: