Ionic 2 Simple Adding Calculator 1


Do you want to be able to create your own simple app that adds two numbers together? Probably not. However this example can provide a base for any project where you get numbers from the user in an input box and need to perform calculations with those numbers.

The screenshot on the left is from the Chrome browser. The code shown below is the code that I modified and added to get these results. There is a calculate button that will calculate the total and display it at the bottom of the app, however the other way is to use binding and have the total computed instantly as the use types the numbers,

Create your Ionic project. Have a look at the post called Ionic Installation for instructions on how to do that. For each new project you create you will only need to do steps four and five in that blog post.

Once you create your ionic project you will notice that you have a home folder with the follow three files in it:

  • home.html
  • home.scss
  • home.ts

Only the home.html and home.ts files were modified from the original installation. These two file are shown below.

This interface is not exactly how you would want to design it, but it demonstrates two different ways to do it. If you don’t want to use a Calculate button you can show the instant result only. You also probably don’t need to show the first and second number at the bottom in the results section but the code is there if you need to use it.

There are two functions that require special attention: addThemFunction() and the getInstantTotal() function. The first function is called when the user clicks the Calculate button, and it sets the total variable. The second function is similar but it returns a value instead of setting a variable.

home.html

<ion-header>
	<ion-navbar>
    	<ion-title>
    		Adding Calculator
    	</ion-title>
	</ion-navbar>
</ion-header>

<ion-content padding>
    <h3>Add Two Numbers</h3>

    <ion-list>
	    <ion-item>
	        <ion-label fixed>1st Number</ion-label>
	        <ion-input type="number" [(ngModel)]="firstNumber"></ion-input>
	    </ion-item>
	    <ion-item>
	        <ion-label fixed>2nd Number</ion-label>
	        <ion-input type="number" [(ngModel)]="secondNumber"></ion-input>
	    </ion-item>
	</ion-list>

	<button ion-button outline (click)="addThemFunction()">Calculate</button>

	<ion-card>
	    <ion-card-header>
	    	Calculator Results:
	    </ion-card-header>
	    <ion-card-content>
	    	<p>First Number is... {{firstNumber}}
	        </p>
	        <!-- {{firstNumber.valueAsNumber}} -->
	        <p>Second Number is... {{secondNumber}}
	        </p>
	        <p>Instant total is... {{getInstantTotal()}}
	        </p>
	        <p>Calc button total is... {{total}}
	        </p>
	    </ion-card-content>
	</ion-card>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
	selector: 'page-home',
	templateUrl: 'home.html'
})
export class HomePage {
    total : number = 0 ;
    firstNumber : any  ;
    secondNumber : any  ;
	constructor(public navCtrl: NavController) { }

	addThemFunction () {
	    let  firstNumber = this.firstNumber ? parseFloat(this.firstNumber) : 0 ;
	    let  secondNumber = this.secondNumber ? parseFloat(this.secondNumber) : 0;
	    this.total = firstNumber + secondNumber ;
	    console.log("clicked!");
  	}
	getInstantTotal() {
    	let  firstNumber = this.firstNumber ? parseFloat(this.firstNumber) : 0 ;
    	let  secondNumber = this.secondNumber ? parseFloat(this.secondNumber) : 0;
        return firstNumber + secondNumber ;
  	}
}

If you were to take this code, create a Ionic 2 project and carefully put this code into your home page run this you will find that there is at least one problem with it. When JavaScript does the math, it sometimes puts a whole bunch of zeros and then a 1 on the end of the number to the right of the decimal place. It can also put a whole bunch of nines at the end of it too. It doesn’t hurt anything, but it’s annoying and unprofessional, so we should try to fix this problem at some point in time.

Series Navigation<< Ionic Hello World Part 2

Leave a comment

Your email address will not be published. Required fields are marked *

One thought on “Ionic 2 Simple Adding Calculator