How to performing arithmetic operations with multiple input fields angular?

Question

I have several input fields where I get a number value from the user. I want to send these number values ​​to my ts file using a button and perform multiplication. Screenshot example here

My codes are here:

  calculate(value0,value1){
    this.bindData(value0,value1);
  }

bindData(a,b){
    
    this.state=true;
    this.cshDvdnd=a*b;
    this.complete.emit(this.cshDvdnd);
  }

<label for="basic-url" class="form-label">Hisse Adedi :</label>
<div class="input-group">
    <span class="input-group-addon" id="hisseAdedi"></span>
    <input type="number" id="value0" name="value0" #value0  class="form-control" placeholder="Sahip Olduğunuz Toplam Hisse Adedini Giriniz ..." aria-describedby="hisseAdedi">
  </div>
  <br>
  <div *ngIf="buttonNumber==0">  
    <label for="basic-url" class="form-label">Nakit Temettü :</label>
  <div class="input-group">
    <input type="number" id="value1" name="value1" #value1 class="form-control" placeholder="Ortaklara Dağıtılacak Hisse Başı Net Tutar (₺) ..." aria-describedby="basic-addon2">
    <span class="input-group-addon" id="basic-addon2"></span>
  </div>
</div> 
<button class="btn btn-primary" (click)="calculate(value0,value1)">Hesapla</button>

So, how can I multiply the input values ​​of value1 and value2 that I get from html? My bindData function is not working correctly.

Here's the screen which is coding by me : https://www.halkaarz.info/dividend-calculate

Answer 1

Since you are using Angular, you can use ngModel. So that you can bind your data OneWay or TwoWay.

Example:

<input
    type="number"
    [(ngModel)]="value0"
    class="form-control"
    placeholder="Sahip Oldu?unuz Toplam Hisse Adedini Giriniz ..."
    aria-describedby="hisseAdedi"
/>

And no need to pass the value from HTML, because you have the vaue in TS also. So, calculate method can be simplified.

HTML:

<button class="btn btn-primary" (click)="calculate()">Hesapla</button>

TS:

value0: number;
value1: number;

calculate(){
   this.bindData(this.value0,this.value1);
}

bindData(a,b){
   this.result = a * b;
}

Your multiplication result stored in result variable. So, you can use it anywhere.

Here is the Demo.