Display

Amount

A number or a sum of money formatted for the current locale.

Features9

API

Theming

Basic

A number, and the same number as money. The currency symbol is muted.

1,234.5

$1,234.5

€1,234.5

₴1,234.5

6 lines

<div class="row">  <tx-amount [amount]="1234.5" />  <tx-amount [amount]="1234.5" currency="USD" />  <tx-amount [amount]="1234.5" currency="EUR" />  <tx-amount [amount]="1234.5" currency="UAH" /></div>

Formats

format sets the digits: 1.0-2 (default), 1.2-2, 1.0-0, 1.2-4 for small prices.

1.0-2: $1,234.5
1.2-2: $1,234.50
1.0-0: $1,235
1.2-4: $0.0025

8 lines

<dl class="grid">  @for (item of formats; track item.format) {    <dt>      <code>{{ item.format }}</code>    </dt>    <dd><tx-amount [amount]="item.value" [format]="item.format" currency="USD" /></dd>  }</dl>

Currency display

currencyDisplay: narrowSymbol (default), symbol, code or name.

$42

USD 42

42 US dollars

6 lines

<div class="column">  <tx-amount [amount]="42" currency="USD" />  <tx-amount [amount]="42" currency="USD" currencyDisplay="symbol" />  <tx-amount [amount]="42" currency="USD" currencyDisplay="code" />  <tx-amount [amount]="42" currency="USD" currencyDisplay="name" /></div>

Compact

notation="compact" shortens large numbers.

1.25K

48.2K

$3.4M

5 lines

<div class="row">  <tx-amount [amount]="1250" notation="compact" />  <tx-amount [amount]="48200" notation="compact" />  <tx-amount [amount]="3400000" notation="compact" currency="USD" /></div>

Signs

signColor colours gains and losses, showSign adds +.

+12.4

-3.1

0.0

Empty and zero

No value shows a dash (emptyText); zero is muted. strong makes the number bolder.

—

n/a

$980

6 lines

<div class="row">  <tx-amount [amount]="null" />  <tx-amount [amount]="null" emptyText="n/a" />  <tx-amount [amount]="0" currency="USD" />  <tx-amount [amount]="980" currency="USD" [strong]="true" /></div>

Locales

The current tectra locale is used by default; locale sets another one.

en-US: €1,234,567.89
de-DE: 1.234.567,89 €
uk-UA: 1 234 567,89 €
fr-FR: 1 234 567,89 €
ja-JP: €1,234,567.89

8 lines

<dl class="grid">  @for (locale of locales; track locale) {    <dt>      <code>{{ locale }}</code>    </dt>    <dd><tx-amount [amount]="1234567.89" currency="EUR" [locale]="locale" /></dd>  }</dl>

In a table

Amounts line up in a table with tabular digits.

Orders
Order	Total	Change
#1042	$1,290.00	+4
#1043	$86.50	-12
#1044	$12,450.75	0

28 lines

<table class="table">  <caption>    Orders  </caption>  <thead>    <tr>      <th scope="col">Order</th>      <th scope="col">Total</th>      <th scope="col">Change</th>    </tr>  </thead>  <tbody>    @for (order of orders; track order.id) {      <tr>        <td>{{ order.id }}</td>        <td><tx-amount [amount]="order.total" currency="USD" format="1.2-2" /></td>        <td>          <tx-amount            [amount]="order.change"            [signColor]="true"            [showSign]="true"            format="1.0-0"          />        </td>      </tr>    }  </tbody></table>

Design tokens

dt changes the look of one amount.

$2,400