Repository files navigation

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

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

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

npm install @angular/cdk ngx-touch-keyboard

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

Import theNgxTouchKeyboardModule in your app.module.ts:

import{NgxTouchKeyboardModule}from'ngx-touch-keyboard';@NgModule({imports:[NgxTouchKeyboardModule],})exportclassAppModule{}

If you want to set the custom locale, provideNGX_TOUCH_KEYBOARD_LOCALE by custom locale

• default locale isenUS

import{NGX_TOUCH_KEYBOARD_LOCALE,faIR}from'ngx-touch-keyboard';@NgModule({providers:[{provide:NGX_TOUCH_KEYBOARD_LOCALE,useValue:faIR}],})exportclassAppModule{}

Add the directive to your input elements:

<inputngxTouchKeyboard[(ngxTouchKeyboardOpen)]="isOpen">

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

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

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

<inputngxTouchKeyboard[ngxTouchKeyboardLocale]="faIR">

<inputngxTouchKeyboard[ngxTouchKeyboardFullScreen]="true">

<divngxTouchKeyboardOrigin#origin="ngxTouchKeyboardOrigin"><inputngxTouchKeyboard[ngxConnectedTouchKeyboardOrigin]="origin"></div>

AngularTouchKeyboard is localized in 8 keyboard-specific locales:

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

• default: white theme
• dark: dark theme

You must put the classdark in the body to use thedark theme.

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

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'

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)

Contributions are welcome! Please feel free to submit a Pull Request.

The MIT License (MIT)