Angular concatenating numbers instead of adding

Question

Angular typescript concatenating numbers instead of adding

Class

  title = 'app';

  a: number;
  b: number;

  c: number;

  calc(): void {
    this.c = this.a + this.b;
  }

View

<input type="text" [(ngModel)]="a" (keyup)="calc()">
<input type="text" [(ngModel)]="b" (keyup)="calc()">

<p>{{c}}</p>

Return

if a = 1 and b = 2 for example it equal c = 12, it should be 3 and when i try parseInt(this.a) it result error Argument of type 'number' is not assignable to parameter of type 'string'.

I think the problem is that you declare the properties as number, then what the typescript is saying make sense. Changing the type to string should solve that issue. — cabesuon
– cabesuon, Commented Jul 22, 2020 at 4:48
use the "+" to convert in number: this.c=(+this.a)+(+this.b) — Eliseo
– Eliseo, Commented Jul 22, 2020 at 6:25

nXn · Accepted Answer · 2020-07-22 05:10:04Z

1

The problem is that in the input type you have mentioend the type as text. Change it to number and it should work fine.

<input type="number" [(ngModel)]="a" (keyup)="calc()">
<input type="number" [(ngModel)]="b" (keyup)="calc()">

<p>{{c}}</p>

Also in the ts file initialize the values of a and b to 0, else you will see a NaN error while giving in input.

a: number =0;
  b: number=0;

answered Jul 22, 2020 at 5:10

nXn

9446 silver badges13 bronze badges

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

1 Comment

pixieaka Over a year ago

how is that happen angular should respect typescript rules ( variables types ) and parsed to number in background. because when i change type to number template design and css selectors will change also.

Eliseo · Accepted Answer · 2020-07-22 06:29:16Z

1

use the "+" to convert in number. In Angular, by defect, the input in an ngModel is a string

this.c=(+this.a)+(+this.b)

NOTE: you can use directly in the .html

{{+a+(+b)}}

answered Jul 22, 2020 at 6:29

Eliseo

58.8k4 gold badges39 silver badges82 bronze badges

Comments

N1gthm4r3 · Accepted Answer · 2020-07-22 05:10:37Z

0

You can't use parseInt over number field, because it's already number.(However compiler thinks so). But when you bind it to input with type text, it'll be converted into string. If you want to input only numbers you should use

<input type='number'>

This is how angular model binding works.

answered Jul 22, 2020 at 5:10

N1gthm4r3

7931 gold badge11 silver badges24 bronze badges

2 Comments

pixieaka Over a year ago

how is that happen angular should respect typescript rules ( variables types ) and parsed to number in background. because when i change type to number template design and css selectors will change also.

N1gthm4r3 Over a year ago

Yes, typescript respects variable types. But in runtime it's not typescript anymore, it's javascript.

Santosh Shinde · Accepted Answer · 2020-07-22 05:01:56Z

0

Try like this

calc(): void {
    this.c = this.a + '' + this.b;
  }

answered Jul 22, 2020 at 5:01

Santosh Shinde

1,21210 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular concatenating numbers instead of adding

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Related