Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

angular-onscreen-material-keyboard

Package Overview
Dependencies
1
Maintainers
2
Versions
15
Issues
File Explorer

Advanced tools

angular-onscreen-material-keyboard

This package is forked from ngx-material-keyboard with bug fixes and additional features

    0.6.0latest
    GitHub

Version published
Maintainers
2
Weekly downloads
755
increased by6.19%

Weekly downloads

Readme

Source

angular-onscreen-material-keyboard

Onscreen virtual keyboard for Angular using Angular Material.

Note that this is a fork of https://github.com/joskwanten/core

ngx-material-keyboard in action

Demo

A demo can be found here.

Docs

Generated documentation can be found here.

Getting started

  1. Install with your prefered packet manager (we're using npm here): npm install --save angular-onscreen-material-keyboard

Be sure to fulfill the peer dependencies of this module, in particular Angular and Angular Material.

  1. Add the module to your project, e.g. app.module.ts:
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule } from '@angular/material/button'; ... import { MatKeyboardModule } from 'angular-onscreen-material-keyboard'; @NgModule({ imports: [ // Angular modules BrowserModule, BrowserAnimationsModule, FormsModule, // Material modules MatButtonModule, MatKeyboardModule, ], ... }) export class AppModule {}
  1. Use the MatKeyboardDirective 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'">

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 'angular-onscreen-material-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 {}

Development

This repository is managed by and layed out for ng-packagr.

Versioning

The application uses semver and is developed with the git flow branching model.

Keywords

FAQs

Last updated on 07 Jan 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc