Angular Academy · Lektion

Integrierte Pipes verwenden

Formatieren Sie Datumsangaben, Zahlen und Texte mit Pipes.

Integrierte Pipes verwenden ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist eine Pipe?

Eine Pipe transformiert Daten direkt in Ihrem Template zur Anzeige. Sie schreiben einen Wert, das Pipe-Zeichen | und anschließend den Namen der Pipe.

Pipes eignen sich hervorragend zum Formatieren von Datumsangaben, Zahlen, Währungen und Texten, ohne zusätzliche Logik in der Komponente schreiben zu müssen.

Die Pipe-Syntax

Die grundlegende Form lautet {{ value | pipeName }}. Angular übergibt den Wert an die Pipe und rendert das transformierte Ergebnis.

<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->

Die Pipes uppercase und lowercase

uppercase und lowercase ändern die Groß- und Kleinschreibung einer Zeichenkette. Sie werden häufig für Beschriftungen und Überschriften verwendet.

@Component({
  selector: "app-demo",
  template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
  name = "angular";
}
// renders: ANGULAR

Die date-Pipe

Die date-Pipe formatiert ein Date-Objekt oder einen Zeitstempel als lesbare Zeichenkette. Standardmäßig verwendet sie ein mittleres Datumsformat.

<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->

// component
today = new Date();

Datumsangaben formatieren

Sie können der date-Pipe eine Formatzeichenkette übergeben, etwa "shortDate", "fullDate" oder ein benutzerdefiniertes Muster wie "yyyy-MM-dd".

<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->

<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->

Die currency-Pipe

Die currency-Pipe formatiert eine Zahl als Geldbetrag. Standardmäßig verwendet sie USD, Sie können jedoch einen Währungscode übergeben.

<p>{{ price | currency }}</p>
<!-- $42.50 -->

<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->

// component
price = 42.5;

Die Pipes number und percent

Die number-Pipe formatiert Zahlen anhand von Ziffernoptionen, und percent stellt einen Wert als Prozentsatz dar.

<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->

<p>{{ 0.25 | percent }}</p>
<!-- 25% -->

digitsInfo verstehen

Die number-Pipe akzeptiert eine digitsInfo-Zeichenkette: minIntegerDigits.minFractionDigits-maxFractionDigits. Beispielsweise zeigt "1.2-2" immer genau zwei Nachkommastellen an.

<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->

<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->

Die json-Pipe

Die json-Pipe serialisiert jedes Objekt zu einer JSON-Zeichenkette. Sie wird hauptsächlich zum Debuggen von Templates verwendet, damit Sie die Struktur Ihrer Daten sehen können.

<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->

// component
user = { id: 1, name: "Ada" };

Die slice-Pipe

Die slice-Pipe gibt einen Teil eines Arrays oder einer Zeichenkette zurück, ähnlich wie JavaScript slice. Sie eignet sich zum Kürzen von Listen.

<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->

<li *ngFor="let item of items | slice:0:3">{{ item }}</li>

Pipes in Standalone-Komponenten importieren

In Standalone-Komponenten müssen Sie die verwendeten Pipes importieren, beispielsweise DatePipe oder CurrencyPipe aus @angular/common.

import { DatePipe, CurrencyPipe } from "@angular/common";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [DatePipe, CurrencyPipe],
  template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
  today = new Date();
}

Schnelltest

Testen Sie Ihr Verständnis der integrierten Pipes.

Zusammenfassung

Sie haben die wichtigsten integrierten Pipes kennengelernt: uppercase, lowercase, date, currency, number, percent, json und slice.

Pipes halten die Formatierung sauber und deklarativ im Template. Als Nächstes verketten Sie Pipes und übergeben ihnen Argumente.

Häufig gestellte Fragen

Ist die Lektion „Integrierte Pipes verwenden“ kostenlos?

Ja — der vollständige Text von „Integrierte Pipes verwenden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Integrierte Pipes verwenden“?

Formatieren Sie Datumsangaben, Zahlen und Texte mit Pipes. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Integrierte Pipes verwenden“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy