Typescript subtraction with decimal numbers

Question

I have a table that tracks stock level changes, on most occasions the addition/subtraction is with whole numbers (-1, -2, +2, +3) etc. However, on some instances +0.5, -0.25 may be required. My current code get the correct values, but when it comes to decimals, it will on deduct or add to the nearest whole number (+1/-1). The oldValue and newValue variable are populated from a stock changes table and I'm displaying the number of change from stock.

Below is the calculation function -

  formatDifference(change: StockChange) {
    const difference = parseInt(change.newValue || '0', 10) - parseInt(change.oldValue || '0', 10);
    return difference > 0 ? '+' + difference : difference;
  }

HTML -

<td style="text-align: center;">
  ({{formatDifference(change)}})
  <div class="stockLabel">
   Difference
  </div>
</td>

Simplest answer is to use [parseFloat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) instead since you don't want to parse an int — Ruan Mendes, Nov 30 '21 at 18:21
Then you need to control the number of decimals to be displayed. See [toLocaleString](https://stackoverflow.com/a/29773435/227299) Or just use [the pipe suggested by Juan Vicente](https://stackoverflow.com/a/70173968/227299) — Ruan Mendes, Nov 30 '21 at 18:27

Juan Vicente Berzosa Tejero · Accepted Answer · 2021-11-30T18:24:11.297

Since you don't store the value, one possible way to do it in the HTML itself is with the decimal pipe (number is the keyword for decimal pipe)

<td style="text-align: center;">
  ( {{    (change?.newValue ?? 0 | number:'1.0-2') - 
          (change?.oldValue ?? 0 | number:'1.0-2')
          | number:'1.0-2'        
    }} )
  <div class="stockLabel">
   Difference
  </div>
</td>

Basic sintaxis:

{{value| number :'digits before decimal point . minimum number of digits after decimal point - maximum number of digits after decimal point' }}

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} For instacen, '1.0-2' means:

A minimum of 1 digit will be show before decimal point
It doesn't have to have digits after decimal point (default)
If it has numbers after decimal point, the max is 2 digits

If you want to pass "the logic" to the ts file, you also can use the decimalPipe programmatically, but you have to import it in your file and then use it as "decimalPipe":

import {DecimalPipe} from '@angular/common';
...
constructor( private decimalPipe: DecimalPipe ) { }
...
formatDifference(change: StockChange) {
    const difference = this.decimalPipe.transform( change.newValue || '0', '1.0-2') - this.decimalPipe.transform( change.oldValue || '0', '1.0-2');
    return difference > 0 ? '+' + difference : difference;
  }

NOTE: The decimal pipe is in de '@angular/common', so you need to have it imported in your module.

More info about decimal pipe HERE

Typescript subtraction with decimal numbers

1 Answers1