Formatowanie waluty za pomocą potoku w Angular

Za pomocą potoku CurrencyPipe można sformatować wyświetlanie waluty. W pierwszym parametrze potoku przekazywany jest kod waluty zgodnie ze specyfikacją ISO 4217 (domyślnie USD). W drugim parametrze ustawiamy sposób wyświetlania waluty. Może on przyjmować następujące wartości: 'code' (kod waluty), 'symbol' (jej symbol), 'symbol-narrow' (dla krajów, które mają kilka symboli waluty), 'string' (dla wyświetlenia dowolnego ciągu znaków). W trzecim opcjonalnym parametrze możemy ustawić format liczby, analogiczny do potoku DecimalPipe. W czwartym opcjonalnym parametrze można określić kod używanej lokalizacji:

html<div>{{ value | number : kod waluty : sposób wyświetlania waluty : format liczby : kod lokalizacji }}</div>

Przykłady

Sprawdźmy działanie potoku na przykładach. W tym celu w klasie komponentu ustawmy następującą właściwość salary, zawierającą wypłatę w określonej walucie:

app/app.component.tsexport class AppComponent {
  salary: number = 867.564;
}

Przykład

Przekształćmy naszą liczbę na walutę:

app/app.component.html<div>{{ salary | currency }}</div>

Wynik wykonania kodu:

html<div>$867.56</div>

Przykład

Teraz wskażmy wyświetlanie waluty w rosyjskich rublach:

app/app.component.html<div>{{ salary | currency:'RUB':'code' }}</div>

Wynik wykonania kodu:

html<div>RUB867.56</div>

Przykład

Wyświetlmy obok liczby symbol rosyjskiego rubla:

app/app.component.html<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Wynik wykonania kodu:

html<div>₽867.56</div>

Przykład

Teraz ustawmy liczbę z czterema cyframi w części ułamkowej:

app/app.component.html<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>

Wynik wykonania kodu:

html<div>RUB867.5640</div>

Przykład

Dodajmy do wyświetlania waluty następujący ciąg znaków:

app/app.component.html<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>

Wynik wykonania kodu:

html<div>this is a new currency - 867.56</div>