ngx-keypad
v1.1.12
Published
An enterprise-class UI components based on Keypad and Angular
Downloads
34
Maintainers
Readme
NGX-KEYPAD
This project was generated with Angular CLI version 9.1.0.
:star: Give a Star!
If you like or are using this project please give it a star here. Thanks!
Screenshot
✨ Features
- Insert numbers only.
- Numbers with mask so it is can use as password.
- Period can use.
- Hide display if you want.
- Maximum length for input string.
- Maximum number can set.
☀️ License
🖥 Environment Support
📦 Installation
NPM
npm install ngx-keypad --save
🔨 Usage
Import the component modules you want to use into your app.module.ts
file and feature modules.
import {NgxKeypadModule} from 'ngx-keypad';
@NgModule({
imports: [ NgxKeypadModule ]
})
export class AppModule {
}
In your template write this code.
<keypad [showPeriod]="true" [isPassword]="false" [(data)]="result"></keypad>
Properties
| Property | Description | Type | Default | | --- | --- | --- | --- | | [showDisplay] | Show Display or not | boolean | true | | [showPeriod] | Show period button or not | boolean | true | | [isPassword] | Write asterisk in the field | boolean | false | | [maxLength] | Not allow more length than this max, null is unlimited | number | null | | [maxNumber] | Not allow more number than this max, null is unlimited | number | null | | [background] | Component background | string | '#ccc' | | [width] | Component width can be for ex 400px | string | '100%' | | [padding] | Component padding can be for ex 20px | string | '10px' | | [(data)] | Data input and output | string | '' |
🔗 Links
⌨️ Development
$ git clone [email protected]:ShadyNagy/ngx-keypad.git
$ cd ngx-keypad
$ npm install
$ npm run start
🤝 Contributing
We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues.
🎉 Users
We list some users here, if your company or product uses ngx-keypad, let us know here!