How to Handle Ionic 6 Keyboard Events with Ionic Native

There are many aspects in hybrid mobile applications, and none of the characteristics is untouched, especially when using the Ionic framework.

Ionic offers everything that helps you develop a hybrid mobile application.

In this tutorial, we will explain how to control the keyboard in the Ionic app. To manage the keyboard in the Ionic app, we will use the Ionic native and Cordova ionic keyboard plugin.

In general, we see as the user starts typing, a keyboard suddenly slides up on the screen. We will show you in this guide how to achieve similar functionality using the Cordova and ionic native packages.

Control Keyboard Events in Ionic 6 with Ionic Native / Cordova

  • Step 1: Create Ionic Project
  • Step 2: Add Keyboard Packages
  • Step 3: Update Package in App Module
  • Step 4: Define Keyboard Events

Create Ionic Project

The first thing that you have to do is to create a new Ionic project. If you have already done so, then skip this step.

ionic start IonicKeyboard blank --type=angular

After the app is manifested, don’t’ forget to get into the app.

Here is the command that will propel you into the app directory.

cd IonicKeyboard

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Add Keyboard Packages

Now, you have to install the keyboard plugin in the Ionic app.

We have to install the Ionic native and Cordova packages, execute the command to add the packages.

ionic cordova plugin add cordova-plugin-ionic-keyboard

npm install @ionic-native/keyboard

Update Package in App Module

In this step, we need to import the Keyboard from ‘@ionic-native/keyboard/ngx’ module. Also, define the package into the providers.

Update the app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
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: [
      Keyboard,
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    }
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

Define Keyboard Events

In order to display or hide the keyboard in Ionic, you have to import the keyboard from ‘@ionic-native/keyboard/ngx’.

Likewise, inject the keyboard module into the constructor method. This way, you are invoking the keyboard service as soon as the component is ready.

Let us update the 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("keyboardDidShow", () => {});
    
    window.addEventListener("keyboardWillHide", () => {});
    
    window.addEventListener("keyboardWillShow", () => {});

    window.addEventListener("keyboardDidHide", () => {});

  }

  displayKeyboard() {
    this.keyboard.show();
  }

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

The keyboardDidShow event is handy and best used when the keyboard is fully open.

The keyboardDidHide event helps perform some action after the keyboard is utterly closed.

The keyboardWillHide event is used to perform some action after the keyboard is closed.

The keyboardWillShow event is used to perform some action after the keyboard is appeared.

In this guide we have covered the basic event, however if you want to know more about the nuances then you can visit here.

Summary

In this quick tutorial, we have understood how to add a keyboard to the Ionic app. We understood how to define various Cordova keyboard events using the addEventListener in the Ionic app.

We hope this quick tutorial will help you in your ionic app development project.