Ionic 5|4 Keyboard Native Plugin Tutorial

In a hybrid application that runs in a WebView, we sometimes face challenges to have control on Keyboard to show or hide when the user starts to type in. To resolve this ve have Cordova plugin which controls keyboard events and provides easy methods to intentionally show or hide Keyboard on user screen.

Here we will discuss How to add Keyboard Native plugin in Ionic 4 application and how to sue Keyboards Hook events.

Let’s start!

Create a new Ionic 5 application

Run following NPM commands to create a new Ionic application using a blank template.

$ ng start Ionic5Keyboard blank --type=angular

Install Keyboard Plugins

Run following NPM commands to install Cordova plugin and it’s Native wrapper

$ ionic cordova plugin add cordova-plugin-ionic-keyboard
$ npm install @ionic-native/keyboard

Import Plugin in Module

To make plugin work throughout the application, open app.module.ts file to import Keyboard class then add in Providers array as shown below:

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Keyboard } from '@ionic-native/keyboard/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Keyboard,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Add Keyboard Method and Events in Component

To use class methods and event handlers, import Keyboard class then add in the component’s constructor.

//home.page.ts
import { Component } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard/ngx';


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private keyboard: Keyboard
  ) {
      ....
      ....
    }
    
    ....
    ....
}

Show or Hide Keyboard

To manually show/ hide keyboard on a page call following methods:

Show Keyboard

this.keyboard.show();

Hide Keyboard

this.keyboard.hide();

Check if Keyboard is visible

To check if Keyboard is opened or closed, we can use isVisible property of the Keyboard class. This property returns boolean.

this.keyboard.isVisible;

Events for Keyboard

The Kayboard class provides the following event triggers which can be caught to bind manual logics.

keyboardWillShow, keyboardDidShow, keyboardWillHide and keyboardDidHide are the available events which we need to bind to windows object in Ionic component.

    window.addEventListener('keyboardWillShow', () => {
      console.log("Keyboard will Show");
    });
    window.addEventListener('keyboardDidShow', () => {
      console.log("Keyboard is Shown");
    });
    window.addEventListener('keyboardWillHide', () => {
      console.log("Keyboard will Hide");
    });
    window.addEventListener('keyboardDidHide', () => {
      console.log("Keyboard is Hidden");
    });

After adding above metho and events, our complete home.page.ts file will look like this:

//home.page.ts
import { Component } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private keyboard: Keyboard
  ) {
    window.addEventListener('keyboardWillShow', () => {
      console.log("Keyboard will Show");
    });
    window.addEventListener('keyboardDidShow', () => {
      console.log("Keyboard is Shown");
    });
    window.addEventListener('keyboardWillHide', () => {
      console.log("Keyboard will Hide");
    });
    window.addEventListener('keyboardDidHide', () => {
      console.log("Keyboard is Hidden");
    });
  }


  showKeyboard() {
    this.keyboard.isVisible;
  }
  hideKeyboard() {
    this.keyboard.hide();
  }
}

Conclusion

Finally, we implemented the Keyboard plugin in Ionic application to control its behavior. Hope you enjoyed this post. Please share it with your friends.

Category: Ionic Framework