180

I have used the number pipe below to limit numbers to two decimal places.

{{ exampleNumber | number : '1.2-2' }}

I was wondering what the logic behind '1.2-2' was? I have played around with these trying to achieve a pipe which filters to zero decimal places but to no avail.

rushtoni88
  • 3,737
  • 7
  • 17
  • 27

5 Answers5

337

The parameter has this syntax:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

So your example of '1.2-2' means:

  • A minimum of 1 digit will be shown before decimal point
  • It will show at least 2 digits after decimal point
  • But not more than 2 digits
rinukkusu
  • 21,351
  • 4
  • 61
  • 68
  • 40
    This also unfortunately rounds the number, and even worse, there's no word about it in the documentation – phil294 Feb 12 '17 at 19:55
  • 2
    @Blauhirn I have the same problem, was there an easy fix or should I create my own pipe? – S. Robijns Apr 25 '18 at 11:51
  • 6
    @phil294 I know your comment is old, but, now there is a description about rounding numbers. https://angular.io/api/common/DecimalPipe – Cristiano Bombazar Feb 22 '20 at 20:36
  • If minFractionDigits is greater than 0, then getting error. The minimum number of digits after fraction (2) is higher than the maximum (0).' for pipe 'DecimalPipe' – cnsnaveen May 21 '21 at 08:15
16

  1. Regarding your first question.The pipe works as follows:

    numberValue | number: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

    • minIntegerDigits: Minimum number of integer digits to show before decimal point,set to 1by default

    • minFractionDigits: Minimum number of integer digits to show after the decimal point

    • maxFractionDigits: Maximum number of integer digits to show after the decimal point

2.Regarding your second question, Filter to zero decimal places as follows:

{{ numberValue | number: '1.0-0' }}

For further reading, checkout the following blog

Mwiza
  • 6,098
  • 3
  • 41
  • 35
10

From the DOCS

Formats a number as text. Group sizing and separator and other locale-specific configurations are based on the active locale.

SYNTAX:

number_expression | number[:digitInfo[:locale]]

where expression is a number:

digitInfo is a string which has a following format: 

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
  • minIntegerDigits is the minimum number of integer digits to use.Defaults to 1
  • minFractionDigits is the minimum number of digits
  • after fraction. Defaults to 0. maxFractionDigits is the maximum number of digits after fraction. Defaults to 3.
  • locale is a string defining the locale to use (uses the current LOCALE_ID by default)

DEMO

Sajeetharan
  • 203,447
  • 57
  • 330
  • 376
2

'1.0-0' will give you zero decimal places i.e. no decimals. e.g.$500

alchi baucha
  • 860
  • 7
  • 16
  • I am trying to format a number like 114.5 to display as 114 but when I use '1.0-0' it displays '115' anybody know why? – Karaja Oct 10 '18 at 14:18
  • 1
    It's because angular rounds the value and gives 115 for 114.5. – alchi baucha Oct 11 '18 at 01:26
  • 2
    Why the downvotes? this works and answers the question of how to filter to zero decimal places. Thanks @alchibaucha solved my problem precisely. – S.. Jan 14 '19 at 10:54
2

'0.0-0' will give you round formatted number with ','

100000.2 -> 100,000

very cool

yael kfir
  • 115
  • 1
  • 4