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.
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
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
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.
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', () => {
});
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.
In this tutorial, we will learn how to create a simple static contact form component…
In this React tutorial, we will learn how to work with asynchronous HTTP requests in…
MySQL is a relational database management system based on SQL – Structured Query Language, and…
React Js Handle Rest API data globally with Context and useState hook tutorial. In this…
Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…
In this tutorial, you will discover how to import CSV file into MySQL database using…