Ngx-touch-keyboard NPM

AngularTouchKeyboard

An Angular touch keyboard component that provides a customizable on-screen keyboard for input elements.

angular touch keyboard

Features

📱 Responsive virtual keyboard
🌐 Multiple locale support
🎯 Flexible positioning
🖥️ Full-screen mode support
🎨 Customizable appearance
🔧 Material Design integration

Demo

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

Installation

npm install @angular/cdk ngx-touch-keyboard

Compatibility

The version of this library is synchronized with the major version of Angular to ensure compatibility.

Angular Version	Package Version
>= 18.0.0	4.x
>= 16.0.0	3.x
>= 14.0.0	2.x

Basic Usage

Import the NgxTouchKeyboardModule in your app.module.ts:

import { NgxTouchKeyboardModule } from 'ngx-touch-keyboard';

@NgModule({
  imports: [
    NgxTouchKeyboardModule
  ],
})
export class AppModule { }

If you want to set the custom locale, provide NGX_TOUCH_KEYBOARD_LOCALE by custom locale

default locale is enUS

import { NGX_TOUCH_KEYBOARD_LOCALE, faIR } from 'ngx-touch-keyboard';

@NgModule({
  providers: [
    { provide: NGX_TOUCH_KEYBOARD_LOCALE, useValue: faIR }
  ],
})
export class AppModule { }

Add the directive to your input elements:

<input ngxTouchKeyboard [(ngxTouchKeyboardOpen)]="isOpen">

API Reference

Directives

NgxTouchKeyboard

@Directive({
  selector: 'input[ngxTouchKeyboard], textarea[ngxTouchKeyboard]'
})

Inputs

Name	Type	Default	Description
`ngxTouchKeyboardOpen`	`boolean`	`false`	Controls the visibility of the keyboard
`ngxTouchKeyboardLocale`	`Locale`	`enUS`	Sets the keyboard locale
`ngxTouchKeyboardFullScreen`	`boolean`	`false`	Enables full-screen mode
`ngxTouchKeyboardDebug`	`boolean`	`false`	Enables debug mode
`ngxConnectedTouchKeyboardOrigin`	`NgxTouchKeyboardOrigin`	`null`	Sets a custom origin for the keyboard position

Methods

openPanel(): Opens the keyboard panel
closePanel(): Closes the keyboard panel
togglePanel(): Toggles the keyboard panel visibility

Material Design Integration

The component automatically detects and integrates with Angular Material form fields, providing proper positioning and styling.

Advanced Usage

Custom locale

<input ngxTouchKeyboard [ngxTouchKeyboardLocale]="faIR">

Full-Screen Mode

<input ngxTouchKeyboard [ngxTouchKeyboardFullScreen]="true">

Custom Position Origin

<div ngxTouchKeyboardOrigin #origin="ngxTouchKeyboardOrigin">
  <input ngxTouchKeyboard [ngxConnectedTouchKeyboardOrigin]="origin">
</div>

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)

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