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 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
@angular/core: ^14.0.0@angular/cdk: ^14.0.0
Usage
Simple usage example
<input
type="text"
ngxTouchKeyboard
#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
To use the dark theme, you must put the class dark in the body.
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 startto start a development servernpm run build-demoto build the demo locally (it will be published automatically by GitHub Actions)
7 Nov 16, 2022
145 Dec 29, 2022
9 Sep 25, 2022
1.4k Dec 29, 2022
1.5k Jan 5, 2023
561 Dec 28, 2022
87 Nov 15, 2022
1.1k Dec 30, 2022
23.2k Jan 3, 2023
8.3k Jan 6, 2023