ng-numeric-keyboard's Introduction

ng-numeric-keyboard

Number keyboard for mobile browsers For Angular

This project was forked in numeric-keyboard

Demo

Usage

1. Install

npm install @xmagic/ng-numeric-keyboard --save

import NgNumericKeyboardModule。

import { NgNumericKeyboardModule } from '@xmagic/ng-numeric-keyboard';

@NgModule({
  imports: [ BrowserModule, NgNumericKeyboardModule ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Template

<ng-numeric-input layout="number"
                  entertext="Next"
                  placeholder="This is placeholder"
                  [disabled]="false"
                  [(ngModel)]="data"
                  (enterpress)="onEnter()"
                  (ngModelChange)="onChange()"
                  (focus)="onInputFocus()"
                  (blur)="onInputBlur()">
</ng-numeric-input>

API

Frequently used API is below. See the link for more information

Inputs

Name	Type	Default	Description
`layout`	string	`number`	keyboard layout. Possible layouts are `number`, `tel` and `phone`
`entertext`	string	`Enter`	the label of keyboard enter key
`placeholder`	string		the input component's placeholder
`disabled`	boolean	false	disable the input component

Outputs

Name	Type	Description
`ngModelChange()`	number	Emits when the enter key of keyboard is pressed
`enterpress()`	void	Emits when the input's value changes
`focus()`	void	Emits when called on focusing
`blur()`	void	Emits when the input loses the focus

Layouts

There are three built-in layouts called number, tel and phone which can be used as a replacement of system keyboard.

number layout

tel layout

phone layout

Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

Use GitHub Issues board to report bugs and feature requests (not our email address)
Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.

Thanks for understanding!