Արտարժույթի ֆորմատավորումը Angular-ի խողովակի միջոցով

Օգտագործելով CurrencyPipe խողովակը, կարելի է ֆորմատավորել արժույթի ցուցադրումը: Խողովակի առաջին պարամետրին փոխանցվում է արժույթի կոդը համաձայն ISO 4217 սպեցիֆիկացիայի (լռելյայն արժեքը USD է): Երկրորդ պարամետրում նշում ենք արժույթի ցուցադրման ձևը: Այն կարող է ընդունել հետևյալ արժեքները՝ 'code' (արժույթի կոդ), 'symbol' (դրա նշանը), 'symbol-narrow' (այն երկրների համար, որոնք ունեն արժույթի մի քանի նշան), 'string' (ցանկացած տող ցուցադրելու համար): Երրորդ ոչ պարտադիր պարամետրում կարող ենք նշել թվի ֆորմատը, որը նման է DecimalPipe խողովակին: Չորրորդ ոչ պարտադիր պարամետրում կարելի է նշել օգտագործվող լոկալի կոդը:

html<div>{{ value | number : արժույթի կոդ : արժույթի ցուցադրում : թվի ֆորմատ : լոկալի կոդ }}</div>

Օրինակներ

Եկեք փորձարկենք խողովակի աշխատանքը օրինակներով: Դրա համար կոմպոնենտի դասում սահմանենք հետևյալ salary հատկությունը, որը պարունակում է աշխատավարձը որոշակի արժույթով:

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

Օրինակ

Եկեք մեր թիվը վերածենք արժույթի:

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

Կոդի կատարման արդյունքը:

html<div>$867.56</div>

Օրինակ

Այժմ եկեք նշենք արժույթի ցուցադրումը ռուսական ռուբլով:

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

Կոդի կատարման արդյունքը:

html<div>RUB867.56</div>

Օրինակ

Եկեք թվի կողքին ցուցադրենք ռուսական ռուբլու նշանը:

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

Կոդի կատարման արդյունքը:

html<div>₽867.56</div>

Օրինակ

Այժմ եկեք ստանանք թիվը չորս նիշով կոտորակային մասում:

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

Կոդի կատարման արդյունքը:

html<div>RUB867.5640</div>

Օրինակ

Եկեք արժույթի ցուցադրմանը ավելացնենք հետևյալ տողը:

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

Կոդի կատարման արդյունքը:

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