'+' is performing concatenation instead of addition in AngularJS

Question

Here is my code where I am implementing a simple calculator in TypeScript .The problem here is that all the operations are working fine except addition where instead of addition, concatenation of numbers is performed.

HTML CODE :

<input type="text" [(ngModel)]="n1" />
 <input type="text" [(ngModel)]="n2" />

<h1>Number 1 : {{n1}}</h1>
<h1>Number 2 : {{n2}}</h1>

<select (change)="handle(selectField.value);" #selectField>
<option value="addition">Addition</option>
<option value="subtraction">Subtraction</option>
<option value="multiply">Multiplication</option>
<option value="divide">Division</option>

</select>


<h1>Result = {{result}}</h1>

My Angular Code is as follows:

import {
  Component,
  OnInit
} from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  n1: number = 0;
  n2: number = 0;
  result: number = 0;

  handle(value: string) {

    if (value == "addition") {
      this.result = this.n1 + this.n2;
    } else if (value == "subtraction") {
      this.result = this.n1 - this.n2;
    } else if (value == "multiply") {
      this.result = this.n1 * this.n2;
    } else if (value == "divide") {
      this.result = this.n1 / this.n2;
    }

  }

  constructor() {}
  ngOnInit() {

  }

}

I have declared both n1 and n2 as numbers and also the result as number. So why is it that the numbers are being treated as strings instead of integers?

Note: I have gone through some other Stack Overflow posts on similar issue but couldn't find the possible solution.

Please help!

They're being treated as strings because they are strings. I assume you're binding some elements in the UI to `n1` and `n2`? — , Jun 21 '17 at 16:03
Note that TypeScript only performs compile-time type checking, not run-time. — Heretic Monkey, Jun 21 '17 at 16:04
@aimprogman, Thank you! you solved my problem. Can you explain why do we need to specify a '+' sign infront of the variable name? — Sai Raman Kilambi, Jun 21 '17 at 16:10
The `+` sign in front coerces the value into a number. See the many ways you can achieve this: https://stackoverflow.com/questions/1133770/how-do-i-convert-a-string-into-an-integer-in-javascript — skyline3000, Jun 21 '17 at 16:12

score 2 · Accepted Answer · answered Jun 21 '17 at 16:07

2

You can resolve it. this.result=(+this.n1)+(+this.n2);

answered Jun 21 '17 at 16:07

aimprogman

294
2
3
16

4

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Heretic Monkey Jun 21 '17 at 16:11

score 1 · Answer 2 · answered Jun 21 '17 at 16:13

1

Any value from an HTML input is automatically string. To resolve this, you must cast/convert your input value to a number. The (+this.n1) hack does it, but to really do it right you should cast or convert your values.

this.result = parseInt(this.n1) + parseInt(this.n2);

This is just one way. There are several others.

answered Jun 21 '17 at 16:13

MBielski

6,628
3
32
43

1

I should also note that this method is prone to failures if the value from the input evaluates to NAN. – MBielski Jun 21 '17 at 16:16

'+' is performing concatenation instead of addition in AngularJS

2 Answers2