Angular Calculator Application

In this guide, we will show you how to create a simple & basic calculator application in Angular. If you are new to Angular you can take a look at our Angular tutorial.

Create Calculator Application

The first step is to create a new calculator application. We name it as ngCalculator. You can refer to the tutorial How to Create a new project in Angular

ng new ngCalculator

Say yes to CSS & Routing.

Add Bootstrap 4

We will use the bootstrap 4 to style our app. Copy the following code to the index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" crossorigin="anonymous">

Create Calculator Component

Create the calculator.component.ts & calculator.component.html under the folder calculator

import { Component} from '@angular/core';

@Component({
  selector: 'ng-calculator',
  templateUrl: './calculator.component.html',
})
export class CalculatorComponent {

}

Template

Now open the calculator.component.html

Our final screen is going to look as follows

• The first row displays the user input including the operators.
• The second row displays the result as the user type.
• C Clears all displays
• x clears the last input i.e delete
• /, X,- & + are our four operators for division, multiplication subtraction & addition
• use . to enter the decimal numbers
• = Calculates and resets the user input.

The Template code is as follows.

We are using event binding to map user clicks to component class.

The pressNum() captures the number & decimal buttons. The pressOperator() method captures the /, X,- & + button clicks. allClear clears all the inputs. clear() deletes the last input. getAnswer() calculates and resets the Calculator again.

<div class="container-fluid">

  <div class="jumbotron col-sm-4 p-2 m-0 bg-inverse">

    <h1 class="text-center">Angular Calculator</h1>

    //Displays the User Input
    <div class="input-group input-group-sm col-sm-12 m-0 p-0">
      <div class="col-sm-12 form-control text-lg-right" type="text">{{input}}</div>
    </div>

    //Displays the Results
    <div class="input-group input-group-sm col-sm-12 m-0 p-0">
      <div class="form-control text-sm-right" type="text">{{result}}</div>
    </div>

    <div class="col-sm-12 p-1 m-0">
      <button class="btn btn-info col-sm-6" type="button" (click)="allClear()">C</button>
      <button class="btn btn-warning col-sm-3" type="button" (click)="clear()">x</button>
      <button class="btn btn-secondary col-sm-3" type="button" (click)="pressOperator('/')">/</button>
    </div>

    <div class="col-sm-12 p-1 m-0">
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('7')">7</button>
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('8')">8</button>
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('9')">9</button>
      <button class="btn btn-lg btn-secondary col-sm-3 p-1" type="button" (click)="pressOperator('*')">X</button>
    </div>
    <div class="col-sm-12 p-1 m-0">
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('4')">4</button>
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('5')">5</button>
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('6')">6</button>
      <button class="btn btn-lg btn-secondary col-sm-3 p-1" type="button" (click)="pressOperator('-')">-</button>
    </div>
    <div class="col-sm-12 p-1 m-0">
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('1')">1</button>
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('2')">2</button>
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('3')">3</button>
      <button class="btn btn-lg btn-secondary col-sm-3 p-1" type="button" (click)="pressOperator('+')">+</button>
    </div>
    <div class="col-sm-12 p-1 m-0">
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('.')">.</button>
      <button class="btn btn-lg btn-outline-secondary col-sm-3 p-1" type="button" (click)="pressNum('0')">0</button>
      <button class="btn btn-lg btn-success col-sm-6 p-1" type="button" (click)="getAnswer()">=</button>
    </div>

  </div>

Component

The component is where we put the calculator logic. We use the selector: 'ng-calculator', so that we can use the calculator component any where in our code using the <ng-calculator></ng-calculator>.

Angular Calculator Logic

Every time user click on a number or operand, we append it to the input variable. For example, if user types 54+200+20, we assign it the input variable. It makes it easier to use the built in JavaScript function eval to calculate the result just by invoking eval(input).

We need to take care of few issues. For Example user may repeat the operands (54++23). Or a invalid decimal number like 54.23.5 etc. Also eval will throw an error if the number begins with 0.

import { Component } from '@angular/core';


@Component({
  selector: 'ng-calculator',
  templateUrl: './calculator.component.html',
})
export class CalculatorComponent {


  input:string = '';
  result:string = '';
  

  pressNum(num: string) {
    
    //Do Not Allow . more than once
    if (num==".") {
      if (this.input !="" ) {

        const lastNum=this.getLastOperand()
        console.log(lastNum.lastIndexOf("."))
        if (lastNum.lastIndexOf(".") >= 0) return;
      }
    }

    //Do Not Allow 0 at beginning. 
    //Javascript will throw Octal literals are not allowed in strict mode.
    if (num=="0") {
      if (this.input=="" ) {
        return;
      }
      const PrevKey = this.input[this.input.length - 1];
      if (PrevKey === '/' || PrevKey === '*' || PrevKey === '-' || PrevKey === '+')  {
          return;
      }
    }

    this.input = this.input + num
    this.calcAnswer();
  }


  getLastOperand() {
    let pos:number;
    console.log(this.input)
    pos=this.input.toString().lastIndexOf("+")
    if (this.input.toString().lastIndexOf("-") > pos) pos=this.input.lastIndexOf("-")
    if (this.input.toString().lastIndexOf("*") > pos) pos=this.input.lastIndexOf("*")
    if (this.input.toString().lastIndexOf("/") > pos) pos=this.input.lastIndexOf("/")
    console.log('Last '+this.input.substr(pos+1))
    return this.input.substr(pos+1)
  }


  pressOperator(op: string) {

    //Do not allow operators more than once
    const lastKey = this.input[this.input.length - 1];
    if (lastKey === '/' || lastKey === '*' || lastKey === '-' || lastKey === '+')  {
      return;
    }
   
    this.input = this.input + op
    this.calcAnswer();
  }


  clear() {
    if (this.input !="" ) {
      this.input=this.input.substr(0, this.input.length-1)
    }
  }

  allClear() {
    this.result = '';
    this.input = '';
  }

  calcAnswer() {
    let formula = this.input;

    let lastKey = formula[formula.length - 1];

    if (lastKey === '.')  {
      formula=formula.substr(0,formula.length - 1);
    }

    lastKey = formula[formula.length - 1];

    if (lastKey === '/' || lastKey === '*' || lastKey === '-' || lastKey === '+' || lastKey === '.')  {
      formula=formula.substr(0,formula.length - 1);
    }

    console.log("Formula " +formula);
    this.result = eval(formula);
  }

  getAnswer() {
    this.calcAnswer();
    this.input = this.result;
    if (this.input=="0") this.input="";
  }

}

pressNum captures the numbers & decimal points . and appends it to the input variable. There are two validations here.

1. A number cannot contain more than one decimal place.
2. Eval will throw the error (Octal literals are not allowed in strict mode.), if the number begins with 0. Hence we remove it.

getLastOperandreturns the last operand. For example, if the user input is 120+57 then the last operand is 57

pressOperator captures the operators. It again appends it to the input variable. We make sure that that operator is followed by a number and not another operator (54++)

clear removes the last input.

allClear clears everything.

calcAnswer is where the calculation happens. We check the last character. If it is a decimal point (.) then we remove it (Example in 95+23.). We also remove the last character if it is an operator. (Example 95+23+).

getAnswer calculates and assigns it to the result to input variable.

That’s it.

Now open the app.component.html and add <ng-calculator></ng-calculator>. Also do not forget to add the CalculatorComponent in the declaration array of app.module.ts.

Next Steps

You can improve the calculator and add operators like % & ± etc. Also try using the ( & ).

You can also avoid using the eval function. In that case you can make use of the algorithm to evaluate arithmetic expressions & Shunting-yard algorithm etc. Also, refer to the ng-calculator

Reference

1. Eval
2. algorithm to evaluate arithmetic expressions
3. Shunting-yard algorithm
4. ng-calculator