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

You should use ngModel: angular.io/api/forms/NgModel

Christian Benseler
– Christian Benseler

2017-07-10 19:55:32 +00:00
Commented Jul 10, 2017 at 19:55 — Christian Benseler
– Christian Benseler, Commented Jul 10, 2017 at 19:55

Nehal · Accepted Answer · 2017-07-10 20:13:36Z

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

answered Jul 10, 2017 at 20:13

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

developer033 Over a year ago

This is the correct one :). Also, It's worth to mention that the OP is missing one of the most important things: mdInput on <input>. Here's a version without ngModel.

EDWARD FABIAN TAPIERO GOMEZ Over a year ago

Thank you very much, I have been helped

Collectives™ on Stack Overflow

Angular 2 Add input values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related