Currency

The currency formatter displays currency values in a consistent format optimised for readability.

This formatter extends the Angular currency pipe. We use Angular pipes to provide consistent data formatting. Refer to the Angular pipes documentation.

When using custom Tangram pipes in a component.ts file, provide the pipe directly and use the public transform method.

{{ 500 | tgCurrency }}

Behaviour

Decimal Places

All amounts are rounded to two decimal places by default using the '1.2-2' digit format.

Currency Code

The currencyCode parameter sets the currency (e.g., 'NZD', 'USD', 'GBP'). If not specified, uses the browser's locale currency.

Symbol Display

The symbolDisplay parameter controls how the currency symbol appears:

• 'symbol' (default) - Shows the currency symbol (e.g., $1,234.56)
• 'code' - Shows the currency code (e.g., NZD 1,234.56)
• 'symbol-narrow' - Shows the narrow symbol variant

Digits Format

The digits parameter uses Angular's digitInfo format: minIntegerDigits.minFractionDigits-maxFractionDigits

Examples:

• '1.2-2' (default) - At least 1 integer digit, 2-2 decimal places
• '1.0-0' - No decimal places (whole numbers only)
• '1.0-4' - Up to 4 decimal places

Trailing Zeros

The hideTrailingZeros parameter removes ".00" from all whole numbers when enabled. By default, ".00" is removed from values ≥ $1,000.