Taiga UI 5.0 is out!

Amount ADDON-COMMERCE

GitHub

On this page

Pipe to format number values to show money sums

Number formatting can be customized by using TUI_NUMBER_FORMAT

base

  1. 10 728.90
  2. ₽10 728.90
  3. €10 728.90
  4. $10 728.90
  5. £10 728.90
  6. −$12 345.10
  7. −£100
  8. Dh 200
Remaining 10 728.90 of 11 000
    
      
    

      
      
    

  
    
      <ol>
    <li>{{ 10728.9 | tuiAmount }}</li>
    <li>{{ 10728.9 | tuiAmount: 'RUB' }}</li>
    <li>{{ 10728.9 | tuiAmount: 'EUR' }}</li>
    <li>{{ 10728.9 | tuiAmount: 'USD' }}</li>
    <li>{{ 10728.9 | tuiAmount: 'GBP' }}</li>
    <li>{{ -12345.1 | tuiAmount: 'USD' : 'start' }}</li>
    <li>{{ 100 | tuiAmount: '£' : 'start' : 'force-negative' }}</li>
    <li>{{ 200 | tuiAmount: 'AED' : 'start' }}</li>
</ol>

<hr class="tui-space_top-1 tui-space_bottom-1" />

<span>Remaining {{ 10728.9 | tuiAmount }} of {{ 11000 | tuiAmount }}</span>

format

−$10,000,000.54
€200.53
$54 000.7
$800.00
0 ₽ 
    
      
    

      
      
    

  
    
      <div [tuiNumberFormat]="{rounding: 'round', thousandSeparator: ',', decimalSeparator: '.'}">
    {{ -10000000.536 | tuiAmount: 'USD' : 'start' }}
</div>

<div>{{ 200.536 | tuiAmount: 'EUR' }}</div>

<div [tuiNumberFormat]="{rounding: 'ceil', precision: 1}">
    {{ 54000.643 | tuiAmount: 'USD' : 'start' }}
</div>

<div [tuiNumberFormat]="{decimalMode: 'always'}">
    {{ 800 | tuiAmount: 'USD' : 'start' }}
</div>

<div [tuiNumberFormat]="{precision: 0}">
    {{ -0.83 | tuiAmount: 'RUB' : 'end' }}
</div>

options

−$12.30
+$3 000
    
      
    

      
      
    

  
    
      <div>{{ -12.3 | tuiAmount }}</div>
<div>{{ 3000 | tuiAmount }}</div>

separate decimal part

120.59
€120.59
$120.59
    
      
    

      
      
    

  
    
      <div>
    <span [tuiNumberFormat]="{precision: 0}">{{ 120.59 | tuiAmount }}</span>
    <span [style.color]="'var(--tui-text-secondary)'">{{ 120.59 | tuiDecimal }}</span>
</div>

<div>
    <span [tuiNumberFormat]="{precision: 0}">{{ 120.59 | tuiAmount: 'EUR' }}</span>
    <span [style.color]="'var(--tui-text-secondary)'">{{ 120.59 | tuiDecimal }}</span>
</div>

<div>
    <span [tuiNumberFormat]="{precision: 0}">{{ 120.59 | tuiAmount: 'USD' }}</span>
    <span [style.color]="'var(--tui-text-secondary)'">{{ 120.59 | tuiDecimal }}</span>
</div>

    

      
      
    

  
    
      :host {
    font: var(--tui-typography-body-l);
}
GitHub StackBlitz