import { Component } from '@angular/core';
import { WrNumber } from 'ngwr/pipes';
@Component({ imports: [WrNumber] })
export class MyComponent {}wrNumber
Format a number, percent or price in the app locale.
Installation
Import the class. This entry point has no stylesheet.
Decimal
The default: grouped digits.
{{ 1234.5 | wrNumber }} <!-- "1,234.5" -->Percent
'percent' multiplies by 100.
{{ 0.875 | wrNumber: 'percent' }} <!-- "87.5%" -->Currency
'currency' takes the ISO 4217 code as the next argument.
{{ 19.99 | wrNumber: 'currency' : 'USD' }} <!-- "$19.99" -->Custom options
Pass any Intl.NumberFormatOptions object.
{{ 19.9 | wrNumber: { minimumFractionDigits: 2 } }} <!-- "19.90" -->
{{ 1234567 | wrNumber: { notation: 'compact' } }} <!-- "1.2M" -->Playground
$19.99
{{ 19.99 | wrNumber: 'currency' : 'USD' }}Customize
Value
Style
Currency
API
| Name | Description | Type | Default |
|---|---|---|---|
wrNumber | Intl.NumberFormat in LOCALE_ID. Takes a style or an options object. | (value: number | string | null | undefined, styleOrOptions: WrNumberStyle | Intl.NumberFormatOptions = 'decimal', currency = 'USD') => string | — |
See also
Component StatisticA key number with a label and an optional change.Pipe wrBytesShow a byte count as kB, MB or GB.Pipe wrPluralPick the right word form for a count, in any language.Pipe wrDateFormat a date with a named preset or a token string.Component Number InputA number field with stepper buttons and locale formatting.