
Security News
NIST Under Federal Audit for NVD Processing Backlog and Delays
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
ngx-touch-keyboard
Advanced tools
An Angular touch keyboard component that provides a customizable on-screen keyboard for input elements.
https://mohsen77sk.github.io/angular-touch-keyboard/
npm install @angular/cdk ngx-touch-keyboard
The version of this library is synchronized with the major version of Angular to ensure compatibility.
Angular Version | Package Version |
---|---|
>= 18.0.0 | 4.x |
>= 16.0.0 | 3.x |
>= 14.0.0 | 2.x |
Import the NgxTouchKeyboardModule
in your app.module.ts:
import { NgxTouchKeyboardModule } from 'ngx-touch-keyboard';
@NgModule({
imports: [
NgxTouchKeyboardModule
],
})
export class AppModule { }
If you want to set the custom locale, provide NGX_TOUCH_KEYBOARD_LOCALE
by custom locale
enUS
import { NGX_TOUCH_KEYBOARD_LOCALE, faIR } from 'ngx-touch-keyboard';
@NgModule({
providers: [
{ provide: NGX_TOUCH_KEYBOARD_LOCALE, useValue: faIR }
],
})
export class AppModule { }
Add the directive to your input elements:
<input ngxTouchKeyboard [(ngxTouchKeyboardOpen)]="isOpen">
@Directive({
selector: 'input[ngxTouchKeyboard], textarea[ngxTouchKeyboard]'
})
Name | Type | Default | Description |
---|---|---|---|
ngxTouchKeyboardOpen | boolean | false | Controls the visibility of the keyboard |
ngxTouchKeyboardLocale | Locale | enUS | Sets the keyboard locale |
ngxTouchKeyboardFullScreen | boolean | false | Enables full-screen mode |
ngxTouchKeyboardDebug | boolean | false | Enables debug mode |
ngxConnectedTouchKeyboardOrigin | NgxTouchKeyboardOrigin | null | Sets a custom origin for the keyboard position |
openPanel()
: Opens the keyboard panelclosePanel()
: Closes the keyboard paneltogglePanel()
: Toggles the keyboard panel visibilityThe component automatically detects and integrates with Angular Material form fields, providing proper positioning and styling.
<input ngxTouchKeyboard [ngxTouchKeyboardLocale]="faIR">
<input ngxTouchKeyboard [ngxTouchKeyboardFullScreen]="true">
<div ngxTouchKeyboardOrigin #origin="ngxTouchKeyboardOrigin">
<input ngxTouchKeyboard [ngxConnectedTouchKeyboardOrigin]="origin">
</div>
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)default
: white themedark
: dark themeYou 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 servernpm run build-demo
to build the demo locally (it will be published automatically by GitHub Actions)Contributions are welcome! Please feel free to submit a Pull Request.
[4.0.0] - 2025-03-04
FAQs
Virtual Keyboard for Angular applications
The npm package ngx-touch-keyboard receives a total of 355 weekly downloads. As such, ngx-touch-keyboard popularity was classified as not popular.
We found that ngx-touch-keyboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.