Create a Calculator using Angular | Addition Subtraction Multiplication Division using Angular

 

App.component.html:

<h1>Welcome to {{title}}</h1>

<h2>Calculator using ngSwitch</h2>

 

Enter First No:<input type="text" [(ngModel)]="firstNo"><br><br>

Enter Second No:<input type="text" [(ngModel)]="secondNo"><br><br>

Enter your choice:

<select (change)="setValue($event)">

  <option value="">--Select one</option>

  <option value="add">Add</option>

  <option value="sub">Sub</option>

  <option value="mul">Mul</option>

  <option value="div">Div</option>

  <option value="other">Other</option>

</select>

<div [ngSwitch]="choose">

  <div *ngSwitchCase="'add'">

    <button (click)="Add()">Add two No</button><br><br>

    Sum = {{result1}} <br><br>

  </div>

  <div *ngSwitchCase="'sub'">

    <button (click)="Sub()">Subtract two No</button><br><br>

    Subtraction = {{result2}} <br><br>

  </div>

  <div *ngSwitchCase="'mul'">

    <button (click)="Mul()">Multiply two No</button><br><br>

    Multiplication = {{result3}} <br><br>

  </div>

  <div *ngSwitchCase="'div'">

    <button (click)="Div()">Devide two No</button><br><br>

    Division = {{result4}}

  </div>

  <div *ngSwitchDefault>

    <h3>Please select a Option</h3>

  </div>

</div>

 

App.component.ts

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

     title='Shubho Tech'

     choose='';

     setValue(drop:any)

     {

       this.choose=drop.target.value

     }

     firstNo:string;

     secondNo:string;

     result1:number;

     result2:number;

     result3:number;

     result4:number;

     Add(){

         this.result1=parseInt(this.firstNo) + parseInt(this.secondNo)

     }

     Sub(){

      this.result2=parseInt(this.firstNo) - parseInt(this.secondNo)

  }

  Mul(){

    this.result3=parseInt(this.firstNo)* parseInt(this.secondNo)

}

Div(){

  this.result4=parseInt(this.firstNo) / parseInt(this.secondNo)

}

}