Angular Virtual Keyboard
Angular Virtual Keyboard is an angular library that can be used to add a virtual keyboard on an input control. It is simple to use and can be implemented by just importing and adding a directive
Installation
Install ang-virtual-keyboard.
npm i ang-virtual-keyboard
ScreenShots
Other variants
Working Example
Features :
1. Three Layouts avaliable
- Keyboard without side numpad
- Keyboard with side numpad
- Keyboard with only numpad
2. Shuffle on key press
3. Mask on key press
Usage
- Template Forms
<!-- Two way binding with property in which you want to store value -->
<input type="text" name="enterhere"
[(ngModel)] = "inputString"
[(appVirtualKeyboard)] = "inputString"
[isKeyboardDirectiveActive] = "true" [kboardType]="'alphaNumericType2'">
- Reactive Forms
<div class="setKeyBoardWidth">
<input type="text" name="reactiveControl" [formControl]="reactiveControl" [appVirtualKeyboard]="''"
(appVirtualKeyboardChange)="valueChange($event)" [isKeyboardDirectiveActive]="true"
[kboardType]="'alphaNumericType2'">
</div>
reactiveControl = new FormControl('');
// Read value from event and set in formControl
valueChange(e: string) {
console.log(e);
this.reactiveControl.setValue(e);
}
Properties:
- ngModel : For binding. Use ngModel or formControl
- appVirtualKeyboard: inital value in case you have any to be prefilled when keyboard is triggered. For template forms use two binding with property. For reactive forms split initial input value and change output emitter as shown in example.
- isKeyboardDirectiveActive: is angular virtual keyboard is active or not
- kboardType : Currently 3 types are supported 'alphaNumericType1' - No side num pad (this is default layout) 'alphaNumericType2' - With side numpad 'numeric' - Only Numpad
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.