Μορφοποίηση νομίσματος με χρήση pipe στο Angular

Με το pipe CurrencyPipe μπορούμε να μορφοποιήσουμε την εμφάνιση νομίσματος. Στην πρώτη παράμετρο του pipe περνάμε τον κωδικό νομίσματος σύμφωνα με την προδιαγραφή ISO 4217 (από προεπιλογή USD). Στη δεύτερη παράμετρο ορίζουμε την εμφάνιση του νομίσματος. Μπορεί να πάρει τις ακόλουθες τιμές: 'code' (κωδικός νομίσματος), 'symbol' (το σύμβολό του), 'symbol-narrow' (για χώρες που έχουν πολλαπλά σύμβολα νομίσματος), 'string' (για εμφάνιση οποιουδήποτε string). Στην τρίτη προαιρετική παράμετρο μπορούμε να ορίσουμε τη μορφοποίηση αριθμού, παρόμοια με το pipe DecimalPipe. Στην τέταρτη προαιρετική παράμετρο μπορούμε να καθορίσουμε τον κωδικό locale που χρησιμοποιείται:

<div>{{ value | number : κωδικός νομίσματος : εμφάνιση νομίσματος : μορφοποίηση αριθμού : κωδικός locale }}</div>

Παραδείγματα

Ας δοκιμάσουμε τη λειτουργία του pipe με παραδείγματα. Για αυτό, στην κλάση του component ορίζουμε την ακόλουθη ιδιότητα salary, που περιέχει μισθό σε κάποιο νόμισμα:

export class AppComponent {
	salary: number = 867.564;
}

Παράδειγμα

Ας μετατρέψουμε τον αριθμό μας σε νόμισμα:

<div>{{ salary | currency }}</div>

Αποτέλεσμα εκτέλεσης κώδικα:

<div>$867.56</div>

Παράδειγμα

Τώρα ας καθορίσουμε την εμφάνιση νομίσματος σε ρωσικά ρούβλια:

<div>{{ salary | currency:'RUB':'code' }}</div>

Αποτέλεσμα εκτέλεσης κώδικα:

<div>RUB867.56</div>

Παράδειγμα

Ας εμφανίσουμε δίπλα στον αριθμό το σύμβολο του ρωσικού ρουβλίου:

<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Αποτέλεσμα εκτέλεσης κώδικα:

<div>₽867.56</div>

Παράδειγμα

Τώρα ας ορίσουμε αριθμό με τέσσερα ψηφία στο κλασματικό μέρος:

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

Αποτέλεσμα εκτέλεσης κώδικα:

<div>RUB867.5640</div>

Παράδειγμα

Ας προσθέσουμε στην εμφάνιση του νομίσματος το ακόλουθο string:

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

Αποτέλεσμα εκτέλεσης κώδικα:

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