Simple Pincode Component

Simple Pincode Component

A very simple and customizable pincode component

$1.00

Augusto Destrero

Augusto Destrero

Member since 2015

Details

Version:
1.0
Ionic:
3.x  
Platforms:
iOS, Android  
Released:
3 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
,

A simple component to display a six number pin code input keyboard. The color of buttons can be customized with an attribute in the component. There are two buttons to undo the last digit or to completely reset the pin code (see screenshots).

INSTALL

Put the folder pin-code you'll find in the zip package in your app src directory, inside the components directory (create the directory if not already there).

Add the component in your app.module.ts, like this:

``` import { PinCodeComponent } from '../components/pin-code/pin-code';

@NgModule({ declarations: [ MyApp, HomePage, LoginPage, PinCodeComponent, ], ```

Use the component like this in your template:

<pin-code color="primary" (complete)="login($event)"></pin-code>

You can use the color attribute to specify the color used for buttons. Standard ionic colors can be used.

When the pin code has been completely inserted (six numbers have been selected) the component emits a complete event you can bind to in your parent component class, like this:

login(pincode) { console.log(pincode); }

That's it!