Search This Blog

CALCULATOR PROGRAM IN ANGULAR 8 


Step1st:-  Create Controller using
                ng g c Controllername

Step2nd:-  Create Design of Calculator
                
Enter name
<input type="text" name="txt" value="{{ result }}"  [(ngModel)]="txt" />
<br>
<br>
<input type="button" name="btn1"  value="1" (click)="display($event)"/>
<input type="button" name="btn2" (click)="display($event)" value="2" />
<input type="button" name="btn3" (click)="display($event)" value="+" />
<input type="button" name="btn4"  (click)="cal($event)" value="=" />
<input type="button" name="btn4" (click)="can($event)" value="C" />

Step3rd:-   Create TypeScript
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-calc',
  templateUrl: './calc.component.html',
  styleUrls: ['./calc.component.css']
})
export class CalcComponent implements OnInit {
  result=''
  constructor() {

    this.result=''

  }

  ngOnInit() {
  }
  display(event: any){

  this.result= this.result+event.target.value;

  }
  cal(event: any)
  {
    this.result=eval(this.result)
  }
  can(event: any)
  {
    this.result=''
  }
}

 
                                           

Post a Comment

If you have any doubt in programming or join online classes then you can contact us by comment .

Previous Post Next Post