Format Number
<ahi-format-number> | AhiFormatNumber
Formats a number using the specified locale and options. Localization is handled by the browser’s Intl.NumberFormat API. No language packs are required.
<ahi-format-number value="1000"></ahi-format-number><br />
<ahi-format-number value="1000000"></ahi-format-number>
Examples
Percentages
To get the value as a percent, set the type attribute to percent.
<ahi-format-number type="percent" value="0"></ahi-format-number><br />
<ahi-format-number type="percent" value="0.25"></ahi-format-number><br />
<ahi-format-number type="percent" value="0.50"></ahi-format-number><br />
<ahi-format-number type="percent" value="0.75"></ahi-format-number><br />
<ahi-format-number type="percent" value="1"></ahi-format-number><br />
<ahi-format-number type="percent" value="1.25"></ahi-format-number>
Currency
To format a number as a monetary value, set the type attribute to currency and set
the currency attribute to the desired ISO 4217 currency code.
<ahi-format-number type="currency" value="1337.42"></ahi-format-number>
Units
To format a number as a unit, set the type attribute to unit and set the
unit attribute to the desired
ECMAScript sanctioned unit.
<ahi-format-number type="unit" value="42" unit="centimeter"></ahi-format-number><br />
<ahi-format-number type="unit" value="98.5" unit="fahrenheit"></ahi-format-number><br />
<ahi-format-number type="unit" value="6" unit="foot"></ahi-format-number><br />
<ahi-format-number type="unit" value="42" unit="inch"></ahi-format-number><br />
<ahi-format-number type="unit" value="2" unit="meter"></ahi-format-number><br />
<ahi-format-number type="unit" value="25" unit="pound"></ahi-format-number>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/format-number/format-number.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/format-number/format-number.js';Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
value
|
The number to format. |
number
|
0
|
|
type
|
The formatting style to use. |
'currency' | 'decimal' | 'percent' | 'unit'
|
'decimal'
|
|
noGrouping
no-grouping
|
Turns off grouping separators. |
boolean
|
false
|
|
currency
|
The ISO 4217 currency code to use when formatting. |
string
|
'USD'
|
|
currencyDisplay
currency-display
|
How to display the currency. |
'symbol' | 'narrowSymbol' | 'code' | 'name'
|
'symbol'
|
|
unit
|
The ECMAScript sanctioned unit to use when formatting. |
string
|
''
|
|
unitDisplay
unit-display
|
How to display the unit. |
'long' | 'short' | 'narrow'
|
'short'
|
|
minimumIntegerDigits
minimum-integer-digits
|
The minimum number of integer digits to use. Possible values are 1–21. |
number
|
- | |
minimumFractionDigits
minimum-fraction-digits
|
The minimum number of fraction digits to use. Possible values are 0–100. |
number
|
- | |
maximumFractionDigits
maximum-fraction-digits
|
The maximum number of fraction digits to use. Possible values are 0–100. |
number
|
- | |
minimumSignificantDigits
minimum-significant-digits
|
The minimum number of significant digits to use. Possible values are 1–21. |
number
|
- | |
maximumSignificantDigits
maximum-significant-digits
|
The maximum number of significant digits to use,. Possible values are 1–21. |
number
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.