Angular Academy · Lektion

Pipes verketten und parametrisieren

Kombinieren Sie Pipes und übergeben Sie Argumente.

Pipes verketten und parametrisieren ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Argumente an Pipes übergeben

Pipes können nach einem Doppelpunkt Argumente akzeptieren. Die Schreibweise lautet {{ value | pipeName:arg1:arg2 }}. Jedes Argument wird durch einen eigenen Doppelpunkt getrennt.

Ein einzelnes Argument

Viele Pipes akzeptieren ein Argument. Die date-Pipe erwartet beispielsweise eine Formatzeichenfolge.

<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->

Mehrere Argumente

Die slice-Pipe erwartet einen Start- und einen Endindex, die jeweils mit einem eigenen Doppelpunkt übergeben werden.

<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->

Dynamische Argumente

Argumente können Komponenteneigenschaften und nicht nur Literale sein. Dadurch lässt sich das Verhalten einer Pipe reaktiv ändern.

<p>{{ price | currency:currencyCode }}</p>

// component
currencyCode = "GBP";
price = 99;

Was ist Pipe-Verkettung?

Sie können Pipes verketten, sodass die Ausgabe einer Pipe zur Eingabe der nächsten wird. Sie werden von links nach rechts ausgeführt.

<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->

Beispiel für eine Verkettung

Hier wird zunächst ein Datum formatiert und anschließend in Großbuchstaben umgewandelt. Zuerst wird die date-Pipe ausgeführt, danach uppercase.

<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->

Die Reihenfolge ist wichtig

Die Reihenfolge verketteter Pipes verändert das Ergebnis. Wenn Sie hier uppercase vor statt nach slice anwenden, entsteht zwar derselbe Text, bei transformierenden Pipes kann die Reihenfolge jedoch einen großen Unterschied machen.

<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->

<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->

Argumente und Verkettung kombinieren

Sie können Argumente und Verkettungen beliebig kombinieren. Jede Pipe erhält weiterhin die Ausgabe der vorherigen Pipe als Wert.

<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>

Verkettung mit currency

Formatieren Sie eine Zahl als Währungsbetrag und kürzen Sie sie anschließend. Auch wenn dies ungewöhnlich ist, zeigt es, dass Pipes sich als kombinierbare Bausteine verwenden lassen.

<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->

Tipps zur Lesbarkeit

Lange Pipe-Verkettungen können die Lesbarkeit beeinträchtigen. Wenn eine Verkettung komplex wird, sollten Sie den Wert stattdessen in der Komponente oder in einer benutzerdefinierten Pipe berechnen.

// instead of a long template chain,
// compute in the component:
get displayName(): string {
  return this.name.slice(0, 5).toUpperCase();
}

Leerzeichen um Pipes

Leerzeichen um | und : sind optional, werden aber aus Gründen der Lesbarkeit empfohlen. Angular ignoriert zusätzliche Leerzeichen.

<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->

Kurze Wissensprüfung

Testen Sie Ihr Verständnis von Pipe-Argumenten und -Verkettungen.

Zusammenfassung

Sie haben gelernt, einzelne und mehrere Argumente mit Doppelpunkten zu übergeben, dynamische Argumente aus Komponenteneigenschaften zu verwenden und Pipes so zu verketten, dass die Ausgabe von links nach rechts weitergereicht wird.

Als Nächstes erstellen Sie Ihre eigene benutzerdefinierte Pipe.

Häufig gestellte Fragen

Ist die Lektion „Pipes verketten und parametrisieren“ kostenlos?

Ja — der vollständige Text von „Pipes verketten und parametrisieren“ 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 „Pipes verketten und parametrisieren“?

Kombinieren Sie Pipes und übergeben Sie Argumente. 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 2 von 4.

Wie lange dauert die Lektion „Pipes verketten und parametrisieren“?

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