stable 1.0.0

Formatter

Declarative output formatting on top of the Intl APIs: put the raw value in the element, describe the format with data-format, and it renders localized. Link ng_formatter.js.

Stateless and DOM-first: the element text (or data-value) is the raw input; the formatter rewrites it as number, currency, percent or date for the requested data-locale. Every value below is formatted live.

Number

1234567.89 · it-IT
1234567.89
1234567.89 · en-US
1234567.89
0.5 · min-fraction 2
0.5

formatter.html

<ul class="ng-list bordered divided">
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">1234567.89 · it-IT</div></div><div class="ng-list-action"><span data-format="number" data-locale="it-IT">1234567.89</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">1234567.89 · en-US</div></div><div class="ng-list-action"><span data-format="number" data-locale="en-US">1234567.89</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">0.5 · min-fraction 2</div></div><div class="ng-list-action"><span data-format="number" data-min-fraction="2">0.5</span></div></li>
</ul>

Currency

EUR · it-IT
1234.5
EUR · it-IT · min-fraction 2
1234.5
USD · en-US
1234.5
GBP · en-GB
1234.5
JPY · ja-JP (0 decimals by ISO)
1234.5
CHF · de-CH
1234.5

formatter.html

<ul class="ng-list bordered divided">
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">EUR · it-IT</div></div><div class="ng-list-action"><span data-format="currency" data-locale="it-IT" data-currency="EUR">1234.5</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">EUR · it-IT · min-fraction 2</div></div><div class="ng-list-action"><span data-format="currency" data-locale="it-IT" data-currency="EUR" data-min-fraction="2">1234.5</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">USD · en-US</div></div><div class="ng-list-action"><span data-format="currency" data-locale="en-US" data-currency="USD">1234.5</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">GBP · en-GB</div></div><div class="ng-list-action"><span data-format="currency" data-locale="en-GB" data-currency="GBP">1234.5</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">JPY · ja-JP (0 decimals by ISO)</div></div><div class="ng-list-action"><span data-format="currency" data-locale="ja-JP" data-currency="JPY">1234.5</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">CHF · de-CH</div></div><div class="ng-list-action"><span data-format="currency" data-locale="de-CH" data-currency="CHF">1234.5</span></div></li>
</ul>

Percent · Date · data-value

When the visible text is not the raw value (here “Price”), pass it via data-value.

percent · 0.123
0.123
percent · 0.123 · min-fraction 1
0.123
number · 1234567.891 · max-fraction 0
1234567.891
date · 2026-05-07 · it-IT
2026-05-07
date · 2026-05-07 · en-US
2026-05-07
date · 2026-05-07 · de-DE
2026-05-07
data-value override
Price

formatter.html

<ul class="ng-list bordered divided">
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">percent · 0.123</div></div><div class="ng-list-action"><span data-format="percent">0.123</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">percent · 0.123 · min-fraction 1</div></div><div class="ng-list-action"><span data-format="percent" data-min-fraction="1">0.123</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">number · 1234567.891 · max-fraction 0</div></div><div class="ng-list-action"><span data-format="number" data-locale="it-IT" data-max-fraction="0">1234567.891</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">date · 2026-05-07 · it-IT</div></div><div class="ng-list-action"><span data-format="date" data-locale="it-IT">2026-05-07</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">date · 2026-05-07 · en-US</div></div><div class="ng-list-action"><span data-format="date" data-locale="en-US">2026-05-07</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">date · 2026-05-07 · de-DE</div></div><div class="ng-list-action"><span data-format="date" data-locale="de-DE">2026-05-07</span></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">data-value override</div></div><div class="ng-list-action"><span data-format="currency" data-currency="EUR" data-value="9876.5">Price</span></div></li>
</ul>

Attributes & API

`data-format`	`number` · `currency` · `percent` · `date` — required.
`data-locale`	BCP-47 locale (default `it-IT`).
`data-currency`	ISO code for `currency` (default `EUR`).
`data-min-fraction` / `data-max-fraction`	Fraction digits bounds (defaults `0` / `2`).
`data-value`	Raw value override when the text is a label.

app.js

ng.formatter.format(el);    // format one element now
ng.formatter.refresh(el);   // re-format (e.g. after changing data-*)

What's supported (and what isn't)

Formatting is delegated to the native Intl APIs, so separators, symbols and per-currency decimals (e.g. JPY has none) are always correct for the locale. The component exposes exactly the options above — dates always render numeric (dd/mm/yyyy-style per locale) and there is no time, unit or compact notation: an invalid value is left as-is, untouched.

Reference

Generated from the component source (ng_formatter.js).

Component info

Name	`formatter`
Type	`js`
Version	`1.0.0`
Status	`stable`
JS	`/assets/js/ng_formatter.js`