How to create a simple calculator (which only adds two numbers) in Angular 7

I am currently learning Angular 7. It’s not a hard framework to learn, but it is a lot to learn if you never used Angular before.

I am not going into the details today. We will write a simple calculator in Angular which will Add two numbers.

All that matters today is to learn how to write input fields and how to create the calculations in TypeScript.

Writing applications in angular is terminal heavy so I would recommend using Visual Studio Code or Install Git BASH.

https://gitforwindows.org/

I am using both, Visual Code for writing the code and Bash for terminal commands.

At the beginning let’s install angular. To do it write this in your terminal:

npm install -g @angular/cli

To create the project write the following command:

ng new calculator

This command will create a new folder with the angular files for our project in it.

So now we can enter our folder with this commando:

cd calculator

and run our project with this command line:

ng serve -o

This will run our angular project and run it automatically in our browser.

We should get something like this:

 

We don’t actually need this so we are going to delete it.

Go to the app.component.html file and delete everything except:

<div style="text-align:center">
 
</div>

We can give our app a title and write the <h1>tag between the div. Because we are styling it with the text-align it will show on the middle of our screen.

We get something like this:

<div style="text-align:center">
  <h1>Calculator</h1>  
</div>

Now we need input fields. Two input fields an submit button.

<div style="text-align:center">
  <h1>Calculator</h1>  

  <input type="number"  id="firstNumber"  placeholder="First Number" class="form-control" #first>

  <input type="number"  id="secondNumber"  placeholder="Second Number" class="form-control" #second>
  <br>
  <button type="submit" (click) = 'calculate(first.value, second.value)'>Calculate</button>
</div>

This way we get two input fields which accept only numbers and a submit button which calculates our values.

The submit button also calls our function “calculate(first.value, second.value)” which is located in app.component.ts file.

In between our input fields and submit button we added <br> html element which breaks the line (<br> = line break)

It should now look something like this:

 
We got our View almost done.
Let’s write now some logic.
Go to your app.component.ts file and modify the code to look like this:
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'calculator';

  sum: number;
  calculate(first:number, second:number) {
   this.sum = +first + +second;
  }
}

What will this code do?

We declared a “sum” variable which will be a number.

We created a “calculate” method which will get from our View the two number variables, “first” and “second” which are our values and which we are going to add.

At the end we sum the two values and store them in our “sum” variable.

Now we need to show our sum variable at the end of the calculation. We can do it when we call {{sum}} in our view.

<h4>{{sum}}</h4>

The final app.component.html HTML View looks like this:

<div style="text-align:center">
  <h1>Calculator</h1>  

  <input type="number"  id="firstNumber"  placeholder="First Number" class="form-control" #first>

  <input type="number"  id="secondNumber"  placeholder="Second Number" class="form-control" #second>
  <br>
  <button type="submit" (click) = 'calculate(first.value, second.value)'>Calculate</button>
  <h4>{{sum}}</h4>
</div>

If we did everything right we get at the end something like this:

Changing the values and clicking the submit button will change the value of our sum.
That’s all.
Today we learned how to write input fields in angular and how to call simple functions.
We also edited some html and created a View. This is a simple example but it shows how we can write things in angular.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.