Ionic 2 Digit Keyboard

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

Info
Changelog
Installation & loading
Usage
Toolbar
Example / demo

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

What's coming next (ASAP) ?
- A global service to manage keyboards and dependant component(s).
- Custom text input component:
  - Prevent native keyboard to show up.
  - Auto showing keyboard on focus.
  - Auto scroll to the input and scroll freeze.
Juin 1, 2017
- Updated demo to the latest Angular & Ionic versions (not affecting Ionic v2).
- Refactored the component, now module oriented (see updated tutorial).
- Can now be used on multiple pages without issues.
- Be careful, IonDigitKeyboard componnet has been renamed to IonDigitKeyboardCmp.
April 8, 2017
- Added text property on action buttons. This allows having a decimal button for-example.
- Updated README with text property and example (see 4.3 Options).

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

show (function): Show the keyboard. The optional callback will be called after transition ends.
hide (function): Hide the keyboard. The optional callback will be called after transition ends.
destroy (function): Destroy the keyboard component and call the optional callback.

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

buttonClick: Any button clicked
leftActionClick: Left action clicked
rightActionClick: Left action clicked
numberClick: Number key clicked

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:

onClick: Same as buttonClick event.
onShow: Use this method to register a callback when the keyboard is showing up (after the animation)
onHide: Use this method to register a callback when the keyboard is getting hidden (also after the animation)

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

align (string): Keyboard horizontal alignement (no effects on full width). Can be 'left', 'center' or 'right'.
width (any): Keyboard width, can be expressed as number or as string for percents and pixels.
visible (boolean): Keyboard visibility.
leftActionOptions (ActionOptions): Keyboard left action options.
rightActionOptions (ActionOptions): Keyboard right action options.
roundButtons (boolean): If set to true, it turns the buttons to rounded buttons. It won't looks good for most of the themes.
showLetters (boolean): If set to true, it will display letters under buttons number.
swipeToHide (boolean): If set to true, swiping the keyboard from top to bottom will hide it.
theme (string): Keyboard visual theme. Available themes: 'light', 'dark', 'ionic', 'opaque-black', 'opaque-white', 'dusk', 'nepal', 'alihossein', 'messenger'. Also accessible from IonDigitKeyboardCmp.themes. You can put all of them on the ion-digit-keyboard component:

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

hidden (boolean): Display the action button or not.
fontSize (string): Optional font size adjustement.
iconName (string): The action Ionic icon name to display.
text (string): A text to display on the action.

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.

kimtaek/ion-digit-keyboard-v2