In this tutorials will teach How to add two numbers in Angular.
First you have to add the FormsModule inside the imports.
Create the new Components addnumbers
addnum.components.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <form> <h1>Add Two Numbers</h1> <div> <label >Number 1</label> <input type = "text" name="num1" [(ngModel)] = "num1" class="form-control" placeholder="Enter Num 1"> </div> <div> <label >Number 2</label> <input type = "text" name="num2" [(ngModel)] = "num2" class="form-control" placeholder="Enter Num 2"> </div> <div > <label >Total</label> <input class="form-control" placeholder="Total" value="{{ result }}"> </div> <button (click)="Total()" class="btn btn-primary mt-4">Submit</button> </form> |
addnum.components.ts
num1:string = ”;
num2:string = ”;
result:number=0;
Total()
{
this.result = parseInt(this.num1) + parseInt(this.num2);
}
Full code on the
addnum.components.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-addnum', templateUrl: './addnum.component.html', styleUrls: ['./addnum.component.scss'] }) export class AddnumComponent implements OnInit { num1:string = ''; num2:string = ''; result:number=0; Total() { this.result = parseInt(this.num1) + parseInt(this.num2); } constructor() { } ngOnInit(): void { } } |
i have attached the video link below. which will do this tutorials step by step
