Usings angular/ts to do math in the component.ts but + doesn't works but - does

Question

i choose this answer over the type="number" one becouse users can just press f12 and get rid of it

adding

type="number"

to my html works but that still doesn't explain why an - works without adding it to

for the minus is what i thought it works becouse - is not an string opperator and + is

I was testing with typescript and I noticed this so when I use minus it works when I use + it does work and I don't know how and can't find where I can find it

my class:

export class Add {
number1: Number;
number2: Number;
total: Number;
}

i have tried giving them into let this is my function

Math(): void {
let numberone = this.add.number1;
let numbertwo = this.add.number2;
this.add.total = numberone + numbertwo;
}

expected result where

numberone = 10
numbertwo = 10
this.add.total = numerone + numbertwo

that the total is becoming 20 but it becomes 1010

my html

<h2>here you can add stuff</h2> 
<div><span>first number: </span><input [(ngModel)]="add.number1" 
placeholder="number1"></div>
<div><span>second number: </span><input [(ngModel)]="add.number2" 
placeholder="number2"></div>
<button (click)="Math()">press here to add</button> <label>{{add.total}}</label>

Answer 1

Following your comment on your question : your issue is that you get the numbers from inputs.

Inputs are always text :

function log(input) {
  console.log(input.value + ' is of type ' + typeof input.value);
}

<input type="text" placeholder="input something here" oninput="log(this)">
<br>
<input type="number" placeholder="input something here" oninput="log(this)">

To resolve that, you need to convert your input values into numbers.

Very easy : just append a + in front of it.

If you have

<input type="number" [(ngModel)]="number1">

Then you will do

add() {
  result = +this.number1 + +this.number2;
}

resulting in a correct addition :

console.log(+'10' + +'10');

EDIT: as shown in the other answers (but with the wrong explanations), Angular converts inputs of type="number" into numbers if your variables are typed as numbers.

You can then take advantage of it, and indeed, type your inputs and your variables as numbers. But it's always better to understand the basics, instead of using something without understanding it !

EDIT 2: To make subsctractions, follow the same logic

console.log(+'10' - +'10');

Answer 2

You should use number, not Number

Number is not a type, it's an interface of es5. Here's its definition

interface Number {
    /**
      * Returns a string representation of an object.
      * @param radix Specifies a radix for converting numeric values to strings. This value is only used for numbers.
      */
    toString(radix?: number): string;

    /**
      * Returns a string representing a number in fixed-point notation.
      * @param fractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.
      */
    toFixed(fractionDigits?: number): string;

    /**
      * Returns a string containing a number represented in exponential notation.
      * @param fractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.
      */
    toExponential(fractionDigits?: number): string;

    /**
      * Returns a string containing a number represented either in exponential or fixed-point notation with a specified number of digits.
      * @param precision Number of significant digits. Must be in the range 1 - 21, inclusive.
      */
    toPrecision(precision?: number): string;

    /** Returns the primitive value of the specified object. */
    valueOf(): number;
}

You also miss the type="number" in the input, so it convert your value to string

Your html should be

<h2>here you can add stuff</h2> 
<div><span>first number: </span><input [(ngModel)]="add.number1" 
placeholder="number1" type="number"></div>
<div><span>second number: </span><input [(ngModel)]="add.number2" 
placeholder="number2" type="number"></div>
<button (click)="Math()">press here to add</button> <label>{{add.total}}</label>
<button (click)="goBack()">go back</button>

About the reason the - work but the + doesn't, it is because string type doesn't have the "-" operator. Therefore, it converts the strings to the numbers. It doesn't happen on "+"

Answer 3

In Add class use type number (first letter lower-case)

Update (question)

In <input> use type="number"

Working example here

Explanation:

First problem - when you use Number instead of number then you get compilation error. After fix it, you face another problem - input value was interpreted by js/angular like string(and '10'+'10' give string concatenation - but if you type '10'-'10' then js implict cast strings to numbers and make substraction) - but when you use type="number" then input values was implicit cast to numbers by js/angular - and you get right result.