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

Property	Description
`ngxTouchKeyboard`	Required to initialize Virtual Keyboard to specified input.
`ngxTouchKeyboardDebug`	Debug mode is on.
`ngxTouchKeyboardFullScreen`	Full screen mode is on.

Methods

Here's the list of all available methods:

Methods	Description
`openPanel(): void`	Open keyboard panel
`closePanel(): void`	Close keyboard panel
`togglePanel(): void`	Toggle keyboard panel

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.

Name	Description
`--tk-color-text`	color of text button
`--tk-background`	color of background panel
`--tk-background-button`	color of background basic button
`--tk-background-button-fn`	color of background functional button
`--tk-background-button-active`	color of background active button