Skip to content

mohsen77sk/angular-touch-keyboard

Repository files navigation

AngularTouchKeyboard

MIT licensed npm version Build Status

What is this?

Virtual Keyboard for Angular applications.

angular touch keyboard

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

Layouts

Depends on attribute inputmode, the keyboard layout is changed.

inputmode Screenshot
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)

License

The MIT License (MIT)