Skip to content

Instantly share code, notes, and snippets.

@diarcastro
Last active May 16, 2018 12:44
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diarcastro/7f092622004a9d56c10cf2d48d05f78d to your computer and use it in GitHub Desktop.
Save diarcastro/7f092622004a9d56c10cf2d48d05f78d to your computer and use it in GitHub Desktop.
Provider to handle cordova-plugin-ionic-keyboard
// 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
/**
* 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() {
}
}
@sjoerdNoBears
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment