mithilesh kumar singh

How to perform Simple Calculator in Angular 2

In this article, We will see how to perform simple calculator functionality in angular 2

First we need to configure of in visual studio. So already I explained how to install typescript and configuration of reference file of angular js in V.S
For this you can go this link

We will go in visual studio and create a folder app in src folder or we can modify. 

So now first right click of app folder and add a Typescript file and give the name app.component.parent.ts and write below code

import { Component, OnInit, ViewChild } from '@angular/core';
import { ChildComponent } from './app.component.child';

@Component({
    moduleId: module.id,
    selector: 'parent-result',
    templateUrl: 'app.component.parent.html'
})

export class ParentComponent implements OnInit {
    private result: string = '';

    @ViewChild('calculator') private _calculator: ChildComponent;

    constructor() {
    }

    ngOnInit(): void {
    }

    private add(value: number): void {
        this.result = 'Result of Addition = ' + value;
    }

    private subtract(value: number): void {
        this.result = 'Result of Substraction = ' + value;
    }

    private multiply(value: number): void {
        this.result = 'Result of Multiply = ' + value;
    }

    private divide(value: number): void {
        this.result = 'Result of Division = ' + value;
    }

    private reset(): void {
        this.result = '';
        this._calculator.clear();
    }

}  

Again right click of app folder and add a Typescript file and give the name app.component.child.ts and write below code and below code we will create 6 methods 

Method1: It checks the validation of first number text box and second number text box.
Method2: It adds of first number and second number.
Method3: It subtracts of first number and second number.
Method4: It multiplies of first number and second number.
Method5: It divides the  of first number and second number.
Method6: It clears the first number text box and second number text box.

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'child',
    templateUrl: 'app.component.child.html'
})

export class ChildComponent implements OnInit {
    private firstNumber: number = 0;
    private secondNumber: number = 0;
    private result: number = 0;
    private valueBool: boolean = false;

    @Output() private addNumber: EventEmitter<number> = new EventEmitter<number>();
    @Output() private subNumber: EventEmitter<number> = new EventEmitter<number>();
    @Output() private mulNumber: EventEmitter<number> = new EventEmitter<number>();
    @Output() private divdeNumber: EventEmitter<number> = new EventEmitter<number>();

    constructor() { }

    ngOnInit(): void {
    }
    private validation(): boolean {
        if (this.firstNumber == 0) {
            alert("Please enter first number");
            return false;
        }
        else if (this.secondNumber == 0) {
            alert("Please enter second number");
            return false;
        }
        else {
            return true;


        }
    }

    private add(): void {
        this.valueBool = this.validation();
        if (this.valueBool == true) {
            this.result = this.firstNumber + this.secondNumber;
            this.addNumber.emit(this.result);
        }
       
    }

    private subtract(): void {
        this.valueBool = this.validation();
        if (this.valueBool == true) {
            this.result = this.firstNumber - this.secondNumber;
            this.subNumber.emit(this.result);
        }
    }

    private multiply(): void {
        this.valueBool = this.validation();
        if (this.valueBool == true) {
            this.result = this.firstNumber * this.secondNumber;
            this.mulNumber.emit(this.result);
        }
    }

    private divide(): void {
        this.valueBool = this.validation();
        if (this.valueBool == true) {
            this.result = this.firstNumber / this.secondNumber;
            this.divdeNumber.emit(this.result);
        }
    }

    public clear(): void {
        this.firstNumber = 0;
        this.secondNumber = 0;
        this.result = 0;
    }
    

}  

Again right click of app folder and add a html file and give the name app.component.parent.html and write below code.

<div class="row">
    <div class="col-lg-3"></div>
    <div align="center">
        <h2>Simple Calculator</h2>
        <hr />
        <div>
            <child (addNumber)="add($event)" (subNumber)="subtract($event)" (mulNumber)="multiply($event)"
                   (divdeNumber)="divide($event)" #calculator></child>
        </div>
        <br />
        
        <div class="wel well-sm"><b> {{result}}</b></div>

        <input class="btn-danger" type="button" value="Reset" (click)="reset()" />
    </div>
    <div class="col-lg-3"></div>

</div>

Again right click of app folder and add a html file and give the name app.component.child.html and write below code.

<style>
    .row{
        padding-top:10px;
    }
    </style>
<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-3">
                <b> Enter First Number :</b>
            </div>
            <div class="col-md-6">
                <input class="form-control" type="number" [(ngModel)]="firstNumber" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
                <b>Enter Second Number :</b>
            </div>
            <div class="col-md-6">
                <input type="number"  class="form-control" [(ngModel)]="secondNumber" />
            </div>
        </div>
        <div class="row">
            <div class="col-md-3">
            </div>
            <div class="col-md-6">
                <input type="button" class="btn-primary" value="Add" (click)="add()" />

                <input type="button" class="btn-primary" value="Subtract" (click)="subtract()" />

                <input type="button" class="btn-primary" value="MULtiply" (click)="multiply()" />

                <input type="button" class="btn-primary" value="DIVision" (click)="divide()" />
              
            </div>
        </div>
    </div>

</div>
Again right click of app folder and add a Typescript file and give the name app.module.ts and write below code.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { EmployeeComponent } from './app.component.employee';

@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [EmployeeComponent],
bootstrap: [EmployeeComponent]
})

export class AppModule { } 

Now modify the directive in index.html page

<body>
    <parent-result>Please wait Angular application is loading ...</parent-result>

</body>

see the final code of index.html below
<!DOCTYPE html>
<html>
<head>
    <title>Angular QuickStart</title>
    <base href="/src/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles.css" rel="stylesheet" />
    <link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <!-- Polyfill(s) for older browsers -->
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../node_modules/core-js/client/shim.min.js"></script>
    <script src="../node_modules/zone.js/dist/zone.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
        System.import('main.js').catch(function (err) { console.error(err); });
    </script>
</head>
<body>
    <parent-result>Please wait Angular application is loading ...</parent-result>
</body>

</html>

Now we run the project 

Now when we click the button without insert any number then it will give the required field validation

When enter then the first number and second number then see the output

We can check all functionality 

and when click the Reset button then text boxes will empty