pipe
Transforms a number into a string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.
{{ value_expression | number [ : digitsInfo [ : locale ] ] }}
value | any | The number to be formatted. |
digitsInfo | string | Decimal representation options, specified by a string in the following format:
Optional. Default is |
locale | string | A locale code for the locale format rules to use. When not supplied, uses the value of Optional. Default is |
If no parameters are specified, the function rounds off to the nearest value using this rounding method. The behavior differs from that of the JavaScript Math.round()
function. In the following case for example, the pipe rounds down where Math.round()
rounds up:
-2.5 | number:'1.0-0' > -3 Math.round(-2.5) > -2
The following code shows how the pipe transforms numbers into text strings, according to various format specifications, where the caller's default locale is en-US
.
@Component({ selector: 'number-pipe', template: `<div> <!--output '2.718'--> <p>e (no formatting): {{e | number}}</p> <!--output '002.71828'--> <p>e (3.1-5): {{e | number:'3.1-5'}}</p> <!--output '0,002.71828'--> <p>e (4.5-5): {{e | number:'4.5-5'}}</p> <!--output '0 002,71828'--> <p>e (french): {{e | number:'4.5-5':'fr'}}</p> <!--output '3.14'--> <p>pi (no formatting): {{pi | number}}</p> <!--output '003.14'--> <p>pi (3.1-5): {{pi | number:'3.1-5'}}</p> <!--output '003.14000'--> <p>pi (3.5-5): {{pi | number:'3.5-5'}}</p> <!--output '-3' / unlike '-2' by Math.round()--> <p>-2.5 (1.0-0): {{-2.5 | number:'1.0-0'}}</p> </div>` }) export class NumberPipeComponent { pi: number = 3.14; e: number = 2.718281828459045; }
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/common/DecimalPipe