https://github.com/tak-bro/ng-numeric-keyboard

Number keyboard for mobile browsers For Angular
https://github.com/tak-bro/ng-numeric-keyboard

angular keyboard mobile mobile-keyboards mobile-web number-keyboard numberkeyboard phone-layout tel-layout

Last synced: 23 days ago
JSON representation

Number keyboard for mobile browsers For Angular

• Host: GitHub
• URL: https://github.com/tak-bro/ng-numeric-keyboard
• Owner: tak-bro
• License: mit
• Created: 2020-02-07T04:31:43.000Z (almost 5 years ago)
• Default Branch: develop
• Last Pushed: 2022-12-10T17:21:36.000Z (almost 2 years ago)
• Last Synced: 2024-10-25T13:34:58.454Z (25 days ago)
• Topics: angular, keyboard, mobile, mobile-keyboards, mobile-web, number-keyboard, numberkeyboard, phone-layout, tel-layout
• Language: TypeScript
• Homepage:
• Size: 2.53 MB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
ng-numeric-keyboard


Number keyboard for mobile browsers For Angular




  

    

  

  

    

  

  

    

  

  

    

  



> This project was forked in [numeric-keyboard](https://github.com/viclm/numeric-keyboard)

## Demo

![Alt Text](https://github.com/tak-bro/ng-numeric-keyboard/raw/develop/static/demo.gif)

## Usage

### 1. Install

```

npm install ng-numeric-keyboard --save

```

import `NgNumericKeyboardModule`。

```typescript

import { NgNumericKeyboardModule } from 'ng-numeric-keyboard';

@NgModule({

  imports: [ BrowserModule, NgNumericKeyboardModule ],

  declarations: [AppComponent],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

### 2. Template

```html

```

## API

Frequently used API is below. See the [link](https://github.com/viclm/numeric-keyboard#optionsprops) 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

![number layout](https://github.com/tak-bro/ng-numeric-keyboard/raw/develop/static/number.png)

##### tel layout

![tel layout](https://github.com/tak-bro/ng-numeric-keyboard/raw/develop/static/tel.png)

##### phone layout

![phone layout](https://github.com/tak-bro/ng-numeric-keyboard/raw/develop/static/phone.png)

## Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use [GitHub Issues](https://github.com/tak-bro/ng-numeric-keyboard/issues) board to report bugs and feature requests (not our email address)

2. 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!

### License

The MIT License (see the [LICENSE](https://github.com/tak-bro/ng-numeric-keyboard/blob/develop/LICENSE) file for the full text)