Number Format Pipe
Overview
Formats a number as text. Group sizing and separator and other locale-specific configurations are based on the pattern data.
Usage
{{ value | numberFormat [ : formatOptions ] }}
Input Value
| Parameter | Type | Description |
|---|---|---|
| value | number / string | The number to be formatted. |
Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
| formatOptions | object | Optional | The results formats can be customized using the formatOptions argument. See formatOptions for further details. |
formatOptions
| Attribute | Type | Required | Description |
|---|---|---|---|
| minIntegerDigits | number | Optional | The minimum digits of integer numbers used. The possible values are from 1 to 21, and the default value is 1. |
| minFractionDigits | number | Optional | The minimum digits of fraction numbers used. The possible values are from 0 to 20, and the default value is 0. |
| maxFractionDigits | number | Optional | The maximum digits of fraction numbers used. The possible values are from 0 to 20, and the default value is 3. |
| notation | string | Optional | The format in which this number should be displayed. For now only support ‘compact’ for compact number formats. The default is “standard”. |
| compactDisplay | string | Optional | The ‘compactDisplay’ is only used when notation is “compact”. The possible value is “short” (default) or “long”, and the default value is “short”. |
Example Code
// input '201703.5416926'
{{ num | numberFormat }}
// output '201,703.542'
// input '1.149999'
{{ num | numberFormat }}
// output '1.150'
// input '2.31'
{{ num | numberFormat }}
// output '2.31'
// input '2017120107'
{{ num | numberFormat }}
// output '2,017,120,107'
// input '.23'
{{ num | numberFormat }}
// output '0.23'
// Format options usages
// Please note that pass object as a parameter,
// the end of the brace should keep a whitespace.
// input '0.5416926'
{{ num | numberFormat: { maxFractionDigits: 6 } }}
// output '0.541693'
// input 1000000
{{ num | numberFormat: {notation: 'compact', compactDisplay: 'short'} }}
// output 1M
// input 1000000
{{ num | numberFormat: {notation: 'compact', compactDisplay: 'long'} }}
// output 1 million