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=''
}
}
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 Answer of Questions and ASK to Doubt