import { Component , ViewChild , OnInit } from '@angular/core' ; import { NavController } from 'ionic-angular' ; import { IonDigitKeyboardCmp , IonDigitKeyboardOptions } from '../../components/ion-digit-keyboard' ; @ Component ( { selector : 'page-page2' , templateUrl : 'page2.html' } ) export class Page2 implements OnInit { @ ViewChild ( IonDigitKeyboardCmp ) keyboard ; userId : string = '' ; userPassword : string = '' ; focus : string = '' ; public keyboardSettings : IonDigitKeyboardOptions = { align : 'center' , visible : false , leftActionOptions : { iconName : 'ios-backspace-outline' , fontSize : '1.4em' } , rightActionOptions : { text : '.' , fontSize : '1.3em' } , roundButtons : false , showLetters : true , swipeToHide : true , theme : 'alihossein' } ; constructor ( public navCtrl ) { } ngOnInit ( ) { /**
         * Since we want to prevent native keyboard to show up, we put the disabled
         * attribute on the input, and manage focus programmaticaly.
         */ this . keyboard . onClick . subscribe ( ( key ) => { let field = this . focus ; if ( typeof key == 'number' ) { this [ field ] += key ; } else { if ( key == 'left' ) this [ field ] = this [ field ] . substring ( 0 , this [ field ] . length - 1 ) ; if ( key == 'right' ) this . performLogin ( ) ; } } ) ; this . keyboard . onHide . subscribe ( ( ) => { this . focus = '' ; } ) ; } setFocus ( field ) { this . focus = field ; this . keyboard . show ( ) ; } private performLogin ( ) { this . keyboard . hide ( ( ) => { alert ( 'ID: "' + this . userId + '"\nPassword: "' + this . userPassword + '"' ) ; } ) ; } }