@ngx-extensions/mat-keyboard

Onscreen virtual keyboard for Angular using Angular Material.

---

Demo

A demo can be found here.

Docs

Generated documentation can be found here.

Installation

npm install @ngx-extensions/mat-keyboard

Setup

Import MatKeyboardModule into a module, eg. AppModule:

import { MatKeyboardModule } from '@ngx-extensions/mat-keyboard';

@NgModule({
  imports: [
    ...
    MatKeyboardModule,
    ...
  ],
  ...
})
export class AppModule {}

Usage

Use the MatKeyboardInput directive on your input elements or textareas and set the name or locale of the layout.

If not provided the locale will be derieved from the LOCALE_ID or the browser.

<input [matKeyboard]="'Azərbaycanca'" />

Use the MatKeyboard service in order to manually open a virtual keyboard and handle it through a reference.

import { MatKeyboard, MatKeyboardRef } from '@ngx-extensions/mat-keyboard';

export class DemoComponent {
 private keyboardRef: MatKeyboardRef;
 constructor(private readonly keyboard: MatKeyboard) {}

 openKeyboard() {
  this.keyboardRef = this.keyboard.open();
  keyboardRef.afterDismissed().subscribe(() => console.log('Keyboard closed'));
 }

 closeKeyboard() {
  if (!!this.keyboardRef) {
   this.keyboardRef.dismiss();
  }
 }
}

Providing custom layouts

Most of the base configurations are provided as injection tokens. Please read the documentation to understand how to handle it.

All layouts are based on (or directly inherited from) the angular-virtual-keyboard which is based on GreyWyvern VKI. For details on how to structure a layout see the comment derived from the original source code.

Note that this will most likely be changed in the near future. But for now a huge range of layouts is already usable because of the great contribution back then.

But basicly you just provide the configuration of your new layout in your AppModule:

import {
  IKeyboardLayouts,
  keyboardLayouts,
  MAT_KEYBOARD_LAYOUTS,
  MatKeyboardModule
} from '@ngx-extensions/mat-keyboard';

const customLayouts: IKeyboardLayouts = {
  ...keyboardLayouts,
  'Tölles Läyout': {
    'name': 'Awesome layout',
    'keys': [
      [
        ['1', '!'],
        ['2', '@'],
        ['3', '#']
      ]
    ],
    'lang': ['de-CH']
  }
};

@NgModule({
  ...
  providers: [
    { provide: MAT_KEYBOARD_LAYOUTS, useValue: customLayouts }
  ],
  ...
})
export class AppModule {}