Die Darstellung von Geldbeträgen ist hochgradig fehleranfällig: Kommt das Währungssymbol vor oder nach der Zahl? Nutzt man einen Punkt oder ein Komma als Dezimaltrennzeichen? Gibt es ein Leerzeichen dazwischen? Die CurrencyPipe nimmt dir all diese Lokalisierungsprobleme (I18n) ab und formatiert rohe Zahlenwerte zuverlässig als länderspezifische Währung.
Grundlagen & Syntax im Template
Die CurrencyPipe transformiert eine einfache Zahl (Number) in einen vollständig formatierten String. Standardmäßig nutzt sie den amerikanischen Standard (USD und en-US Formatierung).
Die vollständige Syntax lautet:
{{ wert | currency : währungscode : anzeige : ziffern-info : locale }}
import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common'; // Import in Standalone Components notwendig!
@Component({
selector: 'app-shop',
template: `
<div class="product">
<!-- Ausgabe (Standard USA): $1,234.50 -->
<p>Standard: {{ price | currency }}</p>
<!-- Ausgabe mit spezifiziertem Euro-Code: €1,234.50 -->
<p>Mit Code: {{ price | currency:'EUR' }}</p>
<!-- Ausgabe ohne Symbol, nur der Buchstabencode: EUR1,234.50 -->
<p>Nur Text: {{ price | currency:'EUR':'code' }}</p>
</div>
`,
standalone: true,
imports: [CurrencyPipe]
})
export class ShopComponent {
price = 1234.5;
}Deutsche Formatierung (Locale konfigurieren)
Damit “1.234,50 €” (mit Punkt als Tausendertrenner und Komma für Dezimalstellen) statt des unschönen “€1,234.50” ausgegeben wird, muss das sogenannte Locale (die regionale Formatierungsregel) für Deutsch (de-DE) registriert und gesetzt werden.
Das machst du idealerweise global in deiner app.config.ts (bei modernen Standalone-Apps). Du definierst dort LOCALE_ID und den DEFAULT_CURRENCY_CODE, damit du nicht in jedem einzelnen Template mühsam | currency:'EUR':'symbol':'':'de' schreiben musst.
import { ApplicationConfig, LOCALE_ID, DEFAULT_CURRENCY_CODE } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
// 1. Deutsche Locale-Daten tief im Hintergrund von Angular registrieren
registerLocaleData(localeDe);
export const appConfig: ApplicationConfig = {
providers: [
// 2. Standard-Locale der gesamten App (auch für DatePipe relevant) auf Deutsch setzen
{ provide: LOCALE_ID, useValue: 'de-DE' },
// 3. (Optional) Standard-Währung der CurrencyPipe global auf Euro setzen
{ provide: DEFAULT_CURRENCY_CODE, useValue: 'EUR' }
]
};Sobald du das eingerichtet hast, reicht ein absolut simples {{ price | currency }} im Template, und das Ergebnis ist perfekt lokalisiert: 1.234,50 €.
Nachkommastellen steuern (DigitsInfo)
Du kannst genau festlegen, wie viele Vorkomma- und Nachkommastellen angezeigt werden sollen. Der Parameter digitsInfo erwartet einen String im Format:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
<!--
'1.0-0' bedeutet:
- Min. 1 Vorkommastelle
- Min. 0 Nachkommastellen
- Max. 0 Nachkommastellen (rundet den Betrag strikt auf ganze Zahlen!)
Ausgabe von 1234.5 bei deutschem Locale: 1.235 €
-->
<p>{{ price | currency:'EUR':'symbol':'1.0-0' }}</p>
<!--
Immer zwingend 3 Nachkommastellen anzeigen: '1.3-3'
Ausgabe von 1234.5: 1.234,500 €
-->
<p>{{ price | currency:'EUR':'symbol':'1.3-3' }}</p>Die CurrencyPipe im TypeScript-Code nutzen
Manchmal hast du den Fall, dass du einen Geldbetrag nicht im HTML-Template, sondern direkt im TypeScript-Code (z.B. in einem Service für eine PDF-Generierung) formatieren musst. Du kannst Pipes problemlos per Dependency Injection in Klassen injizieren.
import { Injectable, inject } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class InvoiceService {
// Nutze die moderne inject() Funktion, um die Pipe zu erhalten
private currencyPipe = inject(CurrencyPipe);
generateInvoiceText(amount: number): string {
// Aufruf der .transform() Methode der Pipe
const formatted = this.currencyPipe.transform(amount, 'EUR', 'symbol', '1.2-2', 'de-DE');
return `Bitte überweisen Sie den Betrag von ${formatted} auf unser Konto.`;
}
}Hinweis: Damit die Pipe per inject() aufgelöst werden kann, muss sie bei Standalone-Components in die providers-Liste aufgenommen werden, falls sie dort noch nicht bereitgestellt ist.
Besonderheiten der CurrencyPipe
Vier Display-Modi statt nur Symbol oder Code
Der zweite Parameter akzeptiert nicht nur ‘symbol’ und ‘code’, sondern auch ‘symbol-narrow’ sowie einen frei wählbaren String. Mit {{ wert | currency:‘EUR’:” }} unterdrückst du Symbol und Code komplett — praktisch, wenn die Spalte einer Tabelle bereits eine Währungs-Überschrift hat. Der frühere boolesche true/false-Wert ist seit Angular 5 deprecated.
symbol-narrow ist locale-abhängig
‘symbol-narrow’ liefert die kürzeste regionale Form, etwa $ statt CA$ für kanadische Dollar im US-Locale. Hat ein Locale kein eigenes Narrow-Symbol, fällt Angular automatisch auf das Standard-Symbol zurück — Display-Fehler bleiben also aus.
ISO 4217 bestimmt die Default-Nachkommastellen
Wenn du digitsInfo nicht angibst, ermittelt Angular die Anzahl der Nachkommastellen aus der ISO-4217-Tabelle. EUR und USD bekommen 2 Stellen, der chilenische Peso (CLP) keine, der tunesische Dinar (TND) sogar 3. Du musst also nicht selbst ‘1.2-2’ angeben — es passt meist automatisch.
DEFAULT_CURRENCY_CODE statt überall 'EUR'
Statt jedes currency mit :‘EUR’ aufzurufen, registrierst du den DEFAULT_CURRENCY_CODE-Provider einmal in der app.config.ts. Das gilt app-weit und greift überall dort, wo der Pipe-Aufruf den Code weglässt — Templates bleiben dadurch deutlich sauberer.
digitsInfo-Format genau verstehen
Das Format {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} wirkt unscheinbar, hat aber Tücken: ‘1.0-0’ rundet auf ganze Zahlen, ‘1.2-2’ erzwingt exakt zwei Nachkommastellen, ‘1.0-2’ zeigt 0 bis 2 — bei 1234.50 steht dann 1.234,5 ohne nachgestellte Null.