angular2 Adding two numbers view side

Question

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> `

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

The things written inside your input tag are strings not numbers. — eko
– eko, Commented Aug 3, 2017 at 11:16
yes, do you know anyway to convert or format them to numbers? — Ale Garcia
– Ale Garcia, 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. — eko
– eko, Commented Aug 3, 2017 at 11:40

Sajeetharan · Accepted Answer · 2017-08-03 11:46:16Z

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

edited Aug 3, 2017 at 11:46

answered Aug 3, 2017 at 11:41

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Sajeetharan Over a year ago

I have added both ways, you just need to convert it to an integer. when you multiply by 1 it becomes an integer

Ale Garcia Over a year ago

second way it ok but I was avoiding functions, anyway Im taking note of it

JSON Derulo · Accepted Answer · 2017-08-03 11:41:17Z

5

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

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

edited Aug 3, 2017 at 11:41

answered Aug 3, 2017 at 11:18

JSON Derulo

18.8k11 gold badges62 silver badges85 bronze badges

4 Comments

Ale Garcia Over a year ago

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?

Ale Garcia Over a year ago

$scope isn't AngularJs ? think in Angular 2 $Scope isn't exist anymore. Also Controllers isn't exist anymore...

Ale Garcia Over a year ago

it doesn't because your response is about AngularJs or Angular1. Which doesn't apply to Angular2.

JSON Derulo Over a year ago

@AleGarcia current response is working on AngularJS as well as on Angular 2+

Lubo · Accepted Answer · 2019-10-03 15:26:39Z

5

This is working for me:

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

answered Oct 3, 2019 at 15:26

Lubo

551 silver badge5 bronze badges

Comments

jesusverma · Accepted Answer · 2017-08-07 10:44:19Z

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

Via Controller:

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

Custom Filter :

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

return function (input) {

  return parseInt(input, 10);

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

Expression:

//Declare below code in your controller:

$scope.parseInt = parseInt;

Then:

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

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

edited Aug 7, 2017 at 10:44

answered Aug 3, 2017 at 11:56

jesusverma

1,7451 gold badge17 silver badges17 bronze badges

Comments

General Grievance · Accepted Answer · 2023-04-13 17:00:12Z

2

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

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

edited Apr 13, 2023 at 17:00

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Jun 14, 2022 at 7:04

Sushil

86010 silver badges14 bronze badges

Comments

Ibrahim Ali · Accepted Answer · 2021-05-29 07:57:26Z

0

Add bracket.. Something like this..

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

answered May 29, 2021 at 7:57

Ibrahim Ali

2,5613 gold badges23 silver badges44 bronze badges

Collectives™ on Stack Overflow

angular2 Adding two numbers view side

6 Answers 6

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related