Angular How to Add Two Number

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

<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

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 {
  }

}