search

skol-pro / ion-digit-keyboard-v2

A digital keyboard plugin to use in Ionic 2 applications.
MIT License
94 stars 40 forks source link
angular angular2 angularjs ionic ionic2 plugin typescript

readme

Ionic 2 Digit Keyboard banner

Ionic 2 Digit Keyboard

Try it now using Ionic View with the following id: c53c6c00.

1 - Info

Version: 2.0
Author: Skol (Vincent Letellier)
Email: skol.pro@gmail.com
Donations: You're really welcome to donate, any amount at any time :-)

2 - Changelog

3 - Installation & loading

Copy the ion-digit-keyboard module folder into your project (under src/components/ for example). Import the module in your app.module.ts.

// app.module.ts
import { IonDigitKeyboard } from '../components/ion-digit-keyboard/ion-digit-keyboard.module';
// ...
@NgModule({
    declarations: [
        MyApp,
        // ...
    ],
    imports: [
        IonDigitKeyboard,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        // ...
    ],
    providers: []
})
export class AppModule { }

4 - Usage

4.1 - Importing in component

You can import the keyboard wherever you want, globally in app.component.ts or on every page. For a global usage, you can insert it under ion-nav for example.

// app.component.ts
import { IonDigitKeyboardCmp } from '../components/ion-digit-keyboard';
<!-- app.html (or inline template under app.component.ts) -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

<ion-digit-keyboard></ion-digit-keyboard>

Don't forget to import ion-digit-keyboard.scss in app.scss.

@import './components/ion-digit-keyboard/ion-digit-keyboard';

With this minimalist configuration, you can already use the keyboard, just add the buttonClick event !

<ion-digit-keyboard (buttonClick)="onKeyboardButtonClick()"></ion-digit-keyboard>
onKeyboardButtonClick(key: number) {
    // Log the pressed key
    console.log(key);
}

You could also use the onClick subscriber, to do so, you'll need to use @ViewChild() to access the keyboard component, and ngOnInit to unsure it is instantiated:

@ViewChild(IonDigitKeyboardCmp) keyboard;

//...

ngOnInit(): void {
    this.keyboard.onClick.subscribe((key) => {
        console.log('From subscriber: ', key);
    });
}

CAUTION - In case no event is fired, be sure your browser Mobile Emulation is turned ON, since the keyboard is using the touchend event.

4.2 - Public methods & events

Here are the public component methods (this.keyboard.show(myCallback)):

And here are the available events ((buttonClick)="btnClickFunction($event)"):

Example using buttonClick:

<ion-digit-keyboard (buttonClick)="onKeyboardButtonClick()"></ion-digit-keyboard>
// app.component.ts
public onKeyboardButtonClick(key: any) {
    // Key can be a number (0-9) or a string ('left' or 'right')
}

There is also 3 available subscribers:

4.3 - Options

First, I recommend you to import the IonDigitKeyboardOptions interface.

// app.component.ts
import { IonDigitKeyboardCmp, IonDigitKeyboardOptions } from '../components/ion-digit-keyboard';

Keyboard options (IonDigitKeyboardOptions interface):

Action options (ActionOptions interface):

As you probably already understood, none of those otpions are required ! Also, setting both iconName and text properties will only display the icon.

5 - Toolbar

You can add an ion-toolbar inside the ion-digit-keyboard component:

<ion-digit-keyboard>
    <ion-toolbar no-border-bottom>
        <ion-buttons start>
            <button ion-button (click)="hideKeyboard()">Cancel</button>
        </ion-buttons>
        <ion-buttons end>
            <button ion-button solid>Next</button>
            <button ion-button solid>Done</button>
        </ion-buttons>
    </ion-toolbar>
</ion-digit-keyboard>

6 - Example / demo

Simply clone this repo, run npm install and ionic serve.