Awesome
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 themedark
: 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 servernpm run build-demo
to build the demo locally (it will be published automatically by GitHub Actions)