Angular 2 Add input values

Question

How can I add the values ​​entered in an input

This is my HTML, But I do not know if I should write something in the ts

<div class="small-7 columns">
  <md-input-container>
    <input type="number" id="fnum" placeholder="fnum">
  </md-input-container>
  <md-input-container>
    <input type="number" id="snum" placeholder="snum">
  </md-input-container>
  <md-input-container>
    <input disabled>{{ (snum) + (fnum) }}
  </md-input-container>
</div>

I would appreciate it if you could help me

Answer 1

You can use ngModel to get the input values and ngModelChange for change detection. Then, add them in your ts and update a third variable that holds the addition.

html:

<md-input-container>
    <input mdInput type="number" id="fnum" placeholder="fnum" 
           [(ngModel)]="fnum" (ngModelChange)="addNums()">
</md-input-container>

<p></p>

<md-input-container>
    <input mdInput type="number" id="snum" placeholder="snum" 
           [(ngModel)]="snum" (ngModelChange)="addNums()">
</md-input-container>

<p></p>  

<md-input-container>
    <input mdInput disabled>{{ total }}
</md-input-container>

In ts:

fnum: number = 0;
snum: number = 0;

total: number = 0;

addNums(){
  this.total = this.fnum + this.snum;
}

demo