'+' 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? — user47589
– user47589, Commented Jun 21, 2017 at 16:03
Note that TypeScript only performs compile-time type checking, not run-time. — Heretic Monkey
– Heretic Monkey, Commented Jun 21, 2017 at 16:04
The + sign in front coerces the value into a number. See the many ways you can achieve this: stackoverflow.com/questions/1133770/… — skyline3000
– skyline3000, Commented Jun 21, 2017 at 16:12

aimprogman · Accepted Answer · 2017-06-21 16:07:34Z

2

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

answered Jun 21, 2017 at 16:07

aimprogman

2942 gold badges3 silver badges16 bronze badges

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

1 Comment

Heretic Monkey Over a year ago

While this code snippet may solve the question, including an explanation 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!

MBielski · Accepted Answer · 2017-06-21 16:13:42Z

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, 2017 at 16:13

MBielski

6,6103 gold badges36 silver badges46 bronze badges

1 Comment

MBielski Over a year ago

I should also note that this method is prone to failures if the value from the input evaluates to NAN.

Collectives™ on Stack Overflow

'+' is performing concatenation instead of addition in AngularJS

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related