Provider to handle cordova-plugin-ionic-keyboard

how-to-use-it.js

// Include it on your module's providers

import { KeyboardProvider } from 'providers/keyboard/keyboard.ts'
@NgModule({
  providers: [
    ...
    , KeyboardProvider
    ]
});

// Inject on your page or component

import { KeyboardProvider } from 'providers/keyboard/keyboard.ts'

@IonicPage()
@Component({
  selector: 'my-page',
  templateUrl: 'my-page.html',
})
export class MyPage  {
  constructor(public keyboard: KeyboardProvider){
  }
}

// Use the provider methods like this:

this.keyboard.isVisible; // true or false
this.keyboard.hide();
this.keyboard.show();
this.keyboard.keyboardWillShow().subscribe(event => {
  console.log('Keyboard is Visible');
});
this.keyboard.keyboardWillHide().subscribe( => {
  console.log('Keyboard is Hide');
});

// For more information read the file keyboard.ts or follow the plugin documentation on https://github.com/ionic-team/cordova-plugin-ionic-keyboard

keyboard.ts

/**
 * cordova-plugin-ionic-keyboard Provider
 * Diego Castro <ing.diegocastro@gmail.com>
 *
 */
import { Injectable, OnDestroy, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';

interface IKeyboard {
  isVisible: boolean;
  hideFormAccessoryBar(value: boolean, successCallback?: Function);
  hide();
  show();
}

declare var Keyboard: IKeyboard;

@Injectable()
export class KeyboardProvider implements OnDestroy, OnInit {
  /**
   * Keyboard instance
   *
   * @private
   * @type {IKeyboard}
   * @memberof KeyboardProvider
   */
  private _keyboard: IKeyboard;

  private _keyboardDidHide$: Observable<void> = null;
  private _keyboardDidShow$: Observable<KeyboardEvent> = null;
  private _keyboardWillShow$: Observable<KeyboardEvent> = null;
  private _keyboardWillHide$: Observable<void> = null;

  constructor() {
    this._keyboard = Keyboard;
  }

  ngOnInit() {
  }
  /**
   * Determine if the keyboard is visible
   *
   * @readonly
   * @type {boolean}
   * @memberof KeyboardProvider
   */
  get isVisible(): boolean {
    return this._keyboard.isVisible;
  }
  /**
   * Hide the keyboard toolbar
   * @param value
   * @param successCallback
   */
  hideFormAccessoryBar(value: boolean, successCallback?: Function) {
    this._keyboard.hideFormAccessoryBar(value, successCallback);
  }
  /**
   * Show the keyboard
   */
  show() {
    this._keyboard.show();
  }
  /**
   * Hide the keyboard
   *
   * @memberof KeyboardProvider
   */
  hide() {
    this._keyboard.hide();
  }
  /**
   * This event is fired when the keyboard is fully closed.
   *
   * @returns {Observable<void>}
   * @memberof KeyboardProvider
   */
  keyboardDidHide(): Observable<void> {
    if (!this._keyboardDidHide$) {
      this._keyboardDidHide$ = Observable.fromEvent(window, 'keyboardDidHide');
    }
    return this._keyboardDidHide$;
  }
  /**
   * This event is fired when the keyboard is fully open.
   *
   * @returns {Observable<KeyboardEvent>}
   * @memberof KeyboardProvider
   */
  keyboardDidShow(): Observable<KeyboardEvent> {
    if (!this._keyboardDidShow$) {
      this._keyboardDidShow$ = Observable.fromEvent(window, 'keyboardDidShow');
    }
    return this._keyboardDidShow$;
  }
  /**
   * This event is fired when the keyboard is fully closed.
   *
   * @returns {Observable<void>}
   * @memberof KeyboardProvider
   */
  keyboardWillHide(): Observable<void> {
    if (!this._keyboardWillHide$) {
      this._keyboardWillHide$ = Observable.fromEvent(window, 'keyboardWillHide');
    }
    return this._keyboardWillHide$;
  }
  /**
   * This event fires before keyboard will be shown.
   *
   * @returns {Observable<KeyboardEvent>}
   * @memberof KeyboardProvider
   */
  keyboardWillShow(): Observable<KeyboardEvent> {
    if (!this._keyboardWillShow$) {
      this._keyboardWillShow$ = Observable.fromEvent(window, 'keyboardWillShow');
    }
    return this._keyboardWillShow$;
  }

  ngOnDestroy() {
  }

}

I am having issue with 'declare var Keyboard: IKeyboard;'
It says that Keyboard is not defined for this line:

constructor() {
this._keyboard = Keyboard;
}

Keyboard is not defined because device is not ready.
I edited the constructor in this way and now it works:

constructor() {
    if (!!(window as any).cordova) {
        document.addEventListener('deviceready', () => {
            this._keyboard = Keyboard;
        }, true);
    }
    else {
        this._keyboard = Keyboard;
    }
}

I hope this helps.

-L

How can i get the keyboard height? I could not find any height value from KeyboardEvent?

this.keyboard.keyboardWillShow().subscribe(event => {
  let height = event.keyboardHeight; // does not work
});

constructor() {
    if (!!(window as any).cordova) {
        document.addEventListener('deviceready', () => {
            this._keyboard = Keyboard;
        }, true);
    }
    else {
        this._keyboard = Keyboard;
    }
}

It stills shows Keyboard is not defined, I don't see whats different after the else statement in your code provided as it stills gets:
this._keyboard = Keyboard;
Which brakes up. @lcaprini

The provider has no reference to cordova-plugin-ionic-keyboard. I expected to see an import at least?! And when I use it I have the same messages as the depricated plugin (which is not there anymore, I even wiped the node-modules, www and re-installed the platforms). If I call .show() in iOS I get : WARN: Showing keyboard not supported in iOS due to platform limitations in Xcode. Please tell me what I'm doing wrong.

I am more or less in same situation, so I decided to stick with the old (depreciated) ionic-plugin-keyboard.
I've posted an issue here, related to provider :
ionic-team/cordova-plugin-ionic-keyboard#9
They gave some 'workaround' :
danielsogl/awesome-cordova-plugins#2306

But it looks messy for me really.

Hi, I keep getting the this._keyboard.hideFormAccessoryBar is not a function error when using this example. Does anyone know what causes this/ how to fix this?