Μορφοποίηση αριθμών με χρήση pipes στο Angular

Με το pipe DecimalPipe μπορούμε να μορφοποιήσουμε αριθμούς. Στην πρώτη παράμετρο του pipe περνάμε τον ελάχιστο αριθμό ψηφίων στο ακέραιο μέρος. Στη δεύτερη παράμετρο ορίζουμε τον ελάχιστο αριθμό ψηφίων στο κλασματικό μέρος. Στην τρίτη προαιρετική παράμετρο ορίζουμε τον μέγιστο αριθμό ψηφίων στο κλασματικό μέρος.

Παρόλο που το pipe μας ονομάζεται DecimalPipe, για να το καλέσουμε γράφουμε έτσι: number.

Ας δοκιμάσουμε στην πράξη. Στην κλάση του component ας ορίσουμε τον ακόλουθο αριθμό:

export class AppComponent {
	num: number = 18;
}

Παράδειγμα

Ας εμφανίσουμε τον αριθμό μας έτσι, ώστε στο ακέραιο μέρος του να υπάρχουν δύο ψηφία. Επίσης ο ελάχιστος αριθμός ψηφίων στο κλασματικό μέρος θα είναι 1:

<div>{{ num | number:'2.1' }}</div>

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

<div>18.0</div>

Παράδειγμα

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

<div>{{ num | number:'2.2' }}</div>

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

<div>18.00</div>

Παράδειγμα

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

export class AppComponent {
	num: number = 18.67899;
}

Και ας τον εμφανίσουμε στο HTML template έτσι, ώστε στο κλασματικό μέρος να εμφανίζονται το πολύ δύο ψηφία:

<div>{{ num | number:'2.1-2' }}</div>

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

<div>18.68</div>

Παράδειγμα

Τώρα ας μορφοποιήσουμε τον αριθμό μας έτσι, ώστε στο ακέραιο μέρος του να υπάρχουν τρία ψηφία. Και στο κλασματικό μέρος να εμφανιστούν πέντε ψηφία:

<div>{{ num | number:'3.5-6' }}</div>

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

<div>018.67899</div>

Παράδειγμα

Ας προσπαθήσουμε να εμφανίσουμε τον ελάχιστο αριθμό ψηφίων στο κλασματικό μέρος, που να ξεπερνά τον ορισμένο αριθμό στο νούμερο. Στην περίπτωσή μας ας εμφανίσουμε έξι ψηφία:

<div>{{ num | number:'3.6-8' }}</div>

Σαν αποτέλεσμα εκτέλεσης του κώδικα θα δούμε, ότι το pipe DecimalPipe πρόσθεσε μηδέν στο κλασματικό μέρος:

<div>018.678990</div>