Home

Awesome

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<br> Author: Skol (Vincent Letellier)<br> Email: skol.pro@gmail.com<br> 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:

this.keyboard.onClick.subscribe((key: any) => {
    // Do something
});
this.keyboard.onShow.subscribe(() => {
    // Do something
});

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):

<ion-digit-keyboard
    [align]="keyboardSettings.align"
    [width]="keyboardSettings.width"
    [visible]="keyboardSettings.visible"
    [leftActionOptions]="keyboardSettings.leftActionOptions"
    [rightActionOptions]="keyboardSettings.rightActionOptions"
    [roundButtons]="keyboardSettings.roundButtons"
    [showLetters]="keyboardSettings.showLetters"
    [swipeToHide]="keyboardSettings.swipeToHide"
    [theme]="keyboardSettings.theme"
    (numberClick)="numberClick($event)"
>
</ion-digit-keyboard>

keyboardSettings: IonDigitKeyboardOptions = {
    align: 'center',
    //width: '85%',
    visible: false,
    leftActionOptions: {
        iconName: 'ios-backspace-outline',
        fontSize: '1.4em'
    },
    rightActionOptions: {
        //iconName: 'ios-checkmark-circle-outline',
        text: '.',
        fontSize: '1.3em'
    },
    roundButtons: false,
    showLetters: true,
    swipeToHide: true,
    theme: 'ionic'
}

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.