6

I want to be able to add the numbers from two textbox:

template: `
    <h1>Adding inputBox Numbers</h1>
    <p>Num1: <input [(ngModel)]="num1"></p>
    <p>Num2: <input [(ngModel)]="num2"></p>
    <p>The sum is: {{ num1 + num2 }}</p> `

enter image description here

Even if I defined both variables as numbers:

export class AppComponent {
    num1 : number;
    num2 : number; 
}

So if I perform this operation the result is OK 

 <p>The sum is: {{ 1 + 1 }}</p>

Result: 2

but if I use variables it preforms a concat so the result would be 11.

 <p>The sum is: {{ num1 + num2 }}</p>

result:11

Improve this question
3
  • The things written inside your input tag are strings not numbers. Commented Aug 3, 2017 at 11:16
  • yes, do you know anyway to convert or format them to numbers? Commented Aug 3, 2017 at 11:38
  • D. Simon's answer is partially correct actually. You can define a parseInt method inside your component. I will edit it. Commented Aug 3, 2017 at 11:40

6 Answers 6

Reset to default
18

You can try this,

One way

 <h1>Adding inputBox Numbers</h1>
    <p>Num1: <input [(ngModel)]="num1"></p>
    <p>Num2: <input [(ngModel)]="num2"></p>
 <p>{{ num1*1   +num2*1 }}</p>

DEMO

2ND way

Create a function that will conver the String to a Number inside the ts file

ConvertToInt(val){
  return parseInt(val);
}

then call it 

  <h1>Adding inputBox Numbers</h1>
    <p>Num1: <input [(ngModel)]="num1"></p>
    <p>Num2: <input [(ngModel)]="num2"></p>
   <p>{{ ConvertToInt(num1)   + ConvertToInt(num2) }}</p>

DEMO

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

2 Comments

I have added both ways, you just need to convert it to an integer. when you multiply by 1 it becomes an integer
second way it ok but I was avoiding functions, anyway Im taking note of it
5

Models from HTML inputs are always in string format. You can use this workaround:

<p>The sum is: {{ (num1-0) + (num2-0) }}</p>
Improve this answer

4 Comments

I have tried this way before But I get no results, I am doing this on a Angular PlayGround, do you think it is related to that?
$scope isn't AngularJs ? think in Angular 2 $Scope isn't exist anymore. Also Controllers isn't exist anymore...
it doesn't because your response is about AngularJs or Angular1. Which doesn't apply to Angular2.
@AleGarcia current response is working on AngularJS as well as on Angular 2+
5

This is working for me:

<p>The sum is: {{ +num1 + +num2 }}</p>
Improve this answer

Comments

4

Just use type="number"

<h1>Adding inputBox Numbers</h1>
<p>Num1: <input type="number" [(ngModel)]="num1" ></p>
<p>Num2: <input type="number" [(ngModel)]="num2"></p>
<p>The sum is: {{ num1  + num2 }}</p>

Here is Demo

Following are some more way to achieve this

  1. Via Controller:

    angular.controller('numCtrl', function($scope, $window) { $scope.num = parseInt(num , 10); });

  2. Custom Filter : 

     app.filter('num', function() {

return function (input) {

  return parseInt(input, 10);

}});
{{ (num1 | num) + (num2 | num) } }

  3. Expression:

    //Declare below code in your controller:

    $scope.parseInt = parseInt;

    Then:

    {{parseInt(num1)+parseInt(num2)}}

  4. raina77ow

    {{(num1-0) + (num2-0)}}

Improve this answer

Comments

2 
{{ +element.num1 + +element.num2}}

Just add plus(+) before variable name...

Improve this answer

Comments

0

Add bracket.. Something like this..

<p>The sum is: {{ (num1 + num2) }}</p>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.