Ionic 7 Keyboard with Cordova and Ionic Native Tutorial

The keyboard helps users type whatever they want; in ionic apps, adding a keyboard is simple. Ionic offers a plethora of plugins to create features similar to native mobile apps easily.

In this tutorial, we will share how to manage the keyboard in ionic apps. You will understand how to install and configure Cordova and Ionic native keyboard plugins in Ionic apps.

This guide will make you familiar with the events of keyboard plugins that are significantly important. And tells you how to integrate the keyboard functionality in ionic.

How to Add Keyboard in Ionic Application

• Step 1: Set Up Ionic App
• Step 2: Install Ionic Keyboard Packages
• Step 3: Register Keyboard Plugin in App Module
• Step 4: Manage Keyboard in TypeScript

Set Up Ionic App

In order to start, you must have an Ionic application installed on your system.

However, if you haven’t downloaded it yet, execute the suggested command to create the new ionic app.

ionic start IonicCosmos blank --type=angular

Go inside the project folder.

cd IonicCosmos

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Install Ionic Keyboard Packages

Here are the commands that you need to invoke from the terminal window.

These commands will install the required ionic keyboard packages in the Ionic app.

ionic cordova plugin add cordova-plugin-ionic-keyboard --legacy-peer-deps
npm install @ionic-native/keyboard --legacy-peer-deps

Register Keyboard Plugin in App Module

In the next step, you will be importing the Keyboard module in the app module class.

Hence, head over to the app.module.ts file, and add the given code within the 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';
// Register module
import { Keyboard } from '@ionic-native/keyboard/ngx';
@NgModule({
  declarations: [AppComponent],
  
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
    },
    Keyboard,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

First, import the Keyboard module from the ‘@ionic-native/keyboard/ngx’ package; secondly add the Keyboard module in the providers’ array.

Embed Keyboard in Ionic

In order to handle keyboard, you have define the given code in the home.page.ts file.

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('keyboardWillShow', () => {
      
    });    
    window.addEventListener('keyboardWillHide', () => {
      
    });
    window.addEventListener('keyboardDidHide', () => {
      
    });
  }
  showIonKeyboard() {
    this.keyboard.show();
  }
  hideIonKeyboard() {
    this.keyboard.hide();
  }
}

To manage the keyboard in Ionic, you may use the following events.

This event is triggered when the keyboard is fully open.

window.addEventListener('keyboardDidShow', () => {
  
});

This event is called before keyboard will be shown.

window.addEventListener('keyboardWillShow', () => {
      
});

This event is evoked before keyboard will be closed.

window.addEventListener('keyboardWillHide', () => {
      
});

This event is fired when the keyboard is fully closed.

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

Conclusion

Here in this quick guide, we eventually found a simple way to control the keyboard’s behavior. We have revealed how to deal with keyboard features in the ionic platform.