@angel-gonzalez/ngx-touch-keyboard
v4.0.12
Published
Teclado en pantalla para Angular Material 18
Downloads
11
Maintainers
Readme
AngularTouchKeyboard
What is this?
Virtual Keyboard for Angular applications. Forked from ngx-touch-keyboard and added some features to work in webkit and spanish layouts.
Install
Step 1: Install @angel-gonzalez/ngx-touch-keyboard
npm install @angular/cdk @angel-gonzalez/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 [4.0.12
]
@angular/core
:^18.0.0
@angular/cdk
:^18.0.0
Localization
AngularTouchKeyboard is localized in 5 keyboard-specific locales:
es-ES
English (United States) (default)en-US
English (United States)en-UK
English (United Kingdom)fa-IR
Persian (Iran)sv-SE
Swedish (Sweden)ka-GE
Georgian (Georgia)
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)