Ionic Tutorials

Ionic 6 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 6 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

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

npm install @ionic-native/keyboard

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],
  entryComponents: [],
  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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

How to Build A Simple Contact Form in React Js App

In this tutorial, we will learn how to create a simple static contact form component…

2 days ago

React Redux Handle API Calls with Thunk Middleware Tutorial

In this React tutorial, we will learn how to work with asynchronous HTTP requests in…

5 days ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

1 week ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

2 weeks ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

2 weeks ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago