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 |

Layouts

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' | |

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)