NaN when dealing with number, decimal pipe adds (,) comma in value

While manipulating the number you might get wrong calculation value or NaN value when you use type as a number (if we use string type, we will not get error or warning).

In our case, we used the decimal pipe to format our calculated number, but after calculation when our number goes beyond the 1000 our decimal pipe returns string with added coma in between like 1000.00 -> 1,000.00.

And we got the following.

The specified value "NaN" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

[ If you are preparing for an interview please click here - angular interview questions and answers ]

Following is the screenshot of the warning  

As I discussed above, we can remove it by changing type of our displaying variable to string but that will not be a good way.

Here is our function for calculation

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

import { DecimalPipe } from '@angular/common';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  firstValue: number;

  SecValue: number;

  res: number;

  constructor(private decimalPipe: DecimalPipe) { }

  doCalculation(firstNo, secNo) {

    let tmpRes = firstNo + secNo;

    this.res = +this.decimalPipe.transform(tmpRes, '1.2-2');

  }

}

But it is giving NaN as a result when calculated number is larger than 1000 because decimal pipe adds (,)comma according to numbers digit and 1000 becomes 1,000  so we have removed the (,) comma from the result and then assigned it to the result variable.

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

import { DecimalPipe } from '@angular/common';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  firstValue: number;

  SecValue: number;

  res: number;

  constructor(private decimalPipe: DecimalPipe) { }

  doCalculation(firstNo, secNo) {

    let tmpRes = firstNo + secNo;

    this.res = +this.decimalPipe.transform(tmpRes, '1.2-2').replace(',', '');

  }

}

And that’s it, 

When we Remove comma and converted it to number, we got our expected result.

Hope you like it.