Virtual Keyboard for Angular applications.
https://mohsen77sk.github.io/angular-touch-keyboard/
Step 1: Install ngx-touch-keyboard
npm install @angular/cdk ngx-touch-keyboard
Add ngxTouchKeyboardModule
as an import in your app's root NgModule.
import { ngxTouchKeyboardModule } from 'ngx-touch-keyboard';
@NgModule({
...
imports: [
...
ngxTouchKeyboardModule,
],
...
})
export class AppModule { }
-
@angular/core
:^16.0.0
||^17.0.0
||^18.0.0
-
@angular/cdk
:^16.0.0
||^17.0.0
||^18.0.0
-
@angular/core
:^14.0.0
||^15.0.0
-
@angular/cdk
:^14.0.0
||^15.0.0
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)
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>
Property | Description |
---|---|
ngxTouchKeyboard |
Required to initialize Virtual Keyboard to specified input. |
ngxTouchKeyboardDebug |
Debug mode is on. |
ngxTouchKeyboardFullScreen |
Full screen mode is on. |
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 |
-
default
: white theme -
dark
: dark theme
You must put the class dark
in the body to use the dark
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 |
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)