AngularTouchKeyboard

What is this?

Virtual Keyboard for Angular applications.

Demo

https://mohsen77sk.github.io/angular-touch-keyboard/

Install

Step 1: Install ngx-touch-keyboard

npm install @angular/cdk ngx-touch-keyboard

Step 2: Import the module

Add ngxTouchKeyboardModule as an import in your app's root NgModule.

import { ngxTouchKeyboardModule }  from 'ngx-touch-keyboard';
@NgModule({
  ...
  imports: [
    ...
    ngxTouchKeyboardModule,
  ],
  ...
})
export class AppModule { }

Compatibility

Version [3.0.0]

• @angular/core: ^16.0.0 || ^17.0.0 || ^18.0.0
• @angular/cdk: ^16.0.0 || ^17.0.0 || ^18.0.0

Version [2.0.0]

• @angular/core: ^14.0.0 || ^15.0.0
• @angular/cdk: ^14.0.0 || ^15.0.0

Localization

AngularTouchKeyboard is localized in 7 keyboard-specific locales:

• en-US English (United States) (default)
• en-UK English (United Kingdom)
• fa-IR Persian (Iran)
• he-IL Hebrew (Israel)
• ka-GE Georgian (Georgia)
• ru-RU Russian (Russia)
• sv-SE Swedish (Sweden)

Usage

Simple usage example

<input
  type="text"
  ngxTouchKeyboard
  #touchKeyboard="ngxTouchKeyboard"
  (focus)="touchKeyboard.openPanel()"
/>

Locale usage example

<input
  type="text"
  ngxTouchKeyboard="fa-IR"
  #touchKeyboard="ngxTouchKeyboard"
  (focus)="touchKeyboard.openPanel()"
/>

Material usage example

<mat-form-field>
  <mat-label>Default</mat-label>
  <input
    matInput
    type="text"
    ngxTouchKeyboard
    #touchKeyboard="ngxTouchKeyboard"
  />
  <button
    mat-icon-button
    matSuffix
    type="button"
    (click)="touchKeyboard.togglePanel()"
  >
    <mat-icon> keyboard </mat-icon>
  </button>
</mat-form-field>

Properties

Methods

Here's the list of all available methods:

Themes

Built-in themes

• default: white theme
• dark: dark theme

You must put the class dark in the body to use the dark theme.

Create custom theme

To customize the theme, you need to use css variables.

Layouts

Depends on attribute inputmode, the keyboard layout is changed.

inputmode	Screenshot
inputmode='text'
inputmode='search'
inputmode='email'
inputmode='url'
inputmode='numeric'
inputmode='decimal'
inputmode='tel'

Development

The most useful commands for development are:

• npm run start to start a development server
• npm run build-demo to build the demo locally (it will be published automatically by GitHub Actions)

License

The MIT License (MIT)