When I created this simple calculator app, I wasn’t happy with the default keyboard being displayed as it messed up the layout.  To get around having that happen, I simply created a very simple little keypad using an Ionic grid with buttons for the valid input, in this case zero through nine plus a decimal and a clear button.

Setting the input field to “readonly” prevents the standard keyboard from displaying and input can only come from the embedded number pad.  The clicks on the numbers are handled by some very simple typescript.

 

btnClicked(btn) {

if(btn=="C") {

  this.differential=''

  this.linePressure=''

  this.plateFactor=''

  this.field=''

  this.result=0
 
  this.diffColor='primary'

  this.lpColor='primary'

  this.oriColor='primary'

}

if(this.field=='differential') {

  this.differential+=btn

}

if(this.field=='linePressure') {

  this.linePressure+=btn

}

}