🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

ngx-touch-keyboard

Package Overview
Dependencies
Maintainers
0
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-touch-keyboard

Virtual Keyboard for Angular applications

4.0.0
latest
Source
npm
Version published
Weekly downloads
408
25.15%
Maintainers
0
Weekly downloads
 
Created
Source

AngularTouchKeyboard

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

MIT licensed npm version Build Status

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 VersionPackage Version
>= 18.0.04.x
>= 16.0.03.x
>= 14.0.02.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

NameTypeDefaultDescription
ngxTouchKeyboardOpenbooleanfalseControls the visibility of the keyboard
ngxTouchKeyboardLocaleLocaleenUSSets the keyboard locale
ngxTouchKeyboardFullScreenbooleanfalseEnables full-screen mode
ngxTouchKeyboardDebugbooleanfalseEnables debug mode
ngxConnectedTouchKeyboardOriginNgxTouchKeyboardOriginnullSets 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.

NameDescription
--tk-color-textcolor of text button
--tk-backgroundcolor of background panel
--tk-background-buttoncolor of background basic button
--tk-background-button-fncolor of background functional button
--tk-background-button-activecolor of background active button

Layouts

Depends on attribute inputmode, the keyboard layout is changed.

inputmodeScreenshot
inputmode='text'angular touch keyboard
inputmode='search'angular touch keyboard
inputmode='email'angular touch keyboard
inputmode='url'angular touch keyboard
inputmode='numeric'angular touch keyboard
inputmode='decimal'angular touch keyboard
inputmode='tel'angular touch keyboard

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)

Contributing

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

License

The MIT License (MIT)

Keywords

Angular

FAQs

Package last updated on 04 Mar 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts