Angular 2 - How to get rid of extra decimals in angular binding?

Question

i have such a statement in my view and the binding has value lets says 6970.87127381382131831 but, i want to limit it at 2 decimal at most. Since i am listing elements with ngFor, could not use an object to limit it with .toFixed(2). Thank you all !

{{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier }}

I have tried the method below :

 {{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier | number : 2 }}

Did not help me.

Answer 1

The following expression will allow you set decimal part to two digits:

 {{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier | number : '1.2-2' }}

1.2-2 means: at least one digit before decimal point, at least 2 digits after decimal point but no more than 2 digits.

---

{{ cartitem.original_price * cartitem.qty * cartitem.unit_multiplier | number : '1.0-2' }}

1.0-2 means: at least one digit before decimal point and no more than 2 digits after.

---

About the Angular DecimalPipes and configuration: https://angular.io/api/common/DecimalPipe

Answer 2

as reported in official docs https://docs.angularjs.org/api/ng/filter/number

{{ number_expression | number : fractionSize}}

in your case:

 {{ (cartitem.original_price * cartitem.qty * cartitem.unit_multiplier) | number : 2 }}

if you want a fix number of digits you can create your own filter

App.filter('twoDecimal',function(input, scope){

return function(){

   return input.toFixed(2);

  }
})

and apply it

 {{ (cartitem.original_price * cartitem.qty * cartitem.unit_multiplier) | twoDecimal }}