Pipes in Angular sind ein leistungsstarkes Werkzeug, das Entwicklern hilft, Daten in Templates einfach zu transformieren und zu formatieren. Sie ermöglichen es, Werte wie Datumsangaben, Zahlen, Währungen und mehr direkt im HTML-Template umzuwandeln, ohne dass zusätzlicher Logikcode in den Komponenten erforderlich ist. In diesem Artikel lernst du, was Pipes sind, welche eingebauten Pipes Angular bietet und wie du eigene Pipes erstellst und verwendest.
Was sind Pipes in Angular?
Eine Pipe ist eine einfache Möglichkeit, Daten von einem Format in ein anderes zu transformieren. Sie kann auf Werte im Template angewendet werden, um diese dynamisch anzuzeigen oder zu formatieren, ohne den Wert selbst zu verändern. Pipes funktionieren ähnlich wie Filter, die auf die Daten angewendet werden, bevor sie dem Benutzer präsentiert werden.
Die Syntax für die Verwendung einer Pipe ist einfach und wird mithilfe des Pipe-Zeichens (`|`) im Template angewendet:
{{ expression | pipeName }}
{{ birthday | date }}
In diesem Beispiel wird die `birthday`-Variable mit der `date`-Pipe formatiert, um ein benutzerfreundliches Datum anzuzeigen.
Eingebaute Pipes in Angular
Angular bietet eine Vielzahl von eingebauten Pipes, die häufige Datenformatierungen erleichtern. Hier sind einige der wichtigsten:
1. DatePipe (`date`): Formatiert Datumsangaben.
– Beispiel: `{{ today | date:’longDate‘ }}`
– Ausgabe: `January 15, 2024`
2. CurrencyPipe (`currency`): Formatiert Zahlen als Währung.
– Beispiel: `{{ amount | currency:’EUR‘ }}`
– Ausgabe: `€1,234.56`
3. DecimalPipe (`number`): Formatiert Zahlen mit einer festgelegten Anzahl an Dezimalstellen.
– Beispiel: `{{ value | number:’1.2-2′ }}`
– Ausgabe: `123.46`
4. PercentPipe (`percent`): Formatiert eine Zahl als Prozentsatz.
– Beispiel: `{{ 0.25 | percent }}`
– Ausgabe: `25%`
5. JsonPipe (`json`): Wandelt ein Objekt oder Array in JSON-Format um.
– Beispiel: `{{ myObject | json }}`
– Ausgabe: `{„name“:“Angular“,“version“:11}`
6. SlicePipe (`slice`): Schneidet eine Zeichenkette oder ein Array ab.
– Beispiel: `{{ ‚Angular Pipes‘ | slice:0:6 }}`
– Ausgabe: `Angula`
Eigene Pipes erstellen
Neben den eingebauten Pipes bietet Angular auch die Möglichkeit, eigene Pipes zu erstellen. Dies ist besonders nützlich, wenn du benutzerdefinierte Umwandlungen oder Formatierungen vornehmen möchtest, die über die Standardfunktionen hinausgehen.
Schritt 1: Eine benutzerdefinierte Pipe erstellen
Um eine eigene Pipe zu erstellen, kannst du das Angular CLI verwenden:
ng generate pipe custom
Dies erstellt eine neue Pipe-Klasse und registriert sie automatisch in deinem Modul. Eine Pipe in Angular ist eine Klasse, die mit dem `@Pipe`-Dekorator versehen ist und die `PipeTransform`-Schnittstelle implementiert.
Beispiel für eine benutzerdefinierte Pipe
Angenommen, du möchtest eine Pipe erstellen, die Text in Großbuchstaben umwandelt. Hier ist, wie du dies umsetzen kannst:
custom.pipe.ts:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {
transform(value: string): string {
if (!value) return '';
return value.toUpperCase();
}
}
– `@Pipe({ name: ‚capitalize‘ })`: Definiert den Namen der Pipe, mit dem sie im Template verwendet werden kann.
– `transform(value: string): string`: Die `transform()`-Methode ist das Herzstück jeder Pipe. Sie nimmt den Eingabewert und gibt den transformierten Wert zurück.
Schritt 2: Die benutzerdefinierte Pipe verwenden
Sobald die Pipe erstellt wurde, kann sie in einem Template wie eine eingebaute Pipe verwendet werden:
app.component.html:
<p>{{ 'Hallo Angular' | capitalize }}</p>
Die Ausgabe lautet:
HALLO ANGULAR
Pipes mit Parametern
Pipes können auch Parameter akzeptieren, um die Transformation zu steuern. Angenommen, du möchtest eine Pipe erstellen, die einen Text um eine festgelegte Anzahl von Zeichen kürzt.
truncate.pipe.ts:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number): string {
return value.length > limit ? value.substring(0, limit) + '...' : value;
}
}
In diesem Beispiel akzeptiert die `truncate`-Pipe einen Parameter `limit`, der die maximale Anzahl an Zeichen festlegt, die angezeigt werden sollen.
Verwendung der `truncate`-Pipe im Template:
<p>{{ 'Angular Pipes sind sehr nützlich' | truncate:10 }}</p>
Die Ausgabe lautet:
Angular Pi…
Pipes in Kombination
Ein weiterer Vorteil von Pipes in Angular ist die Möglichkeit, sie miteinander zu kombinieren, um mehrere Transformationen auf einen Wert anzuwenden.
Beispiel:
<p>{{ 'Angular Pipes' | slice:0:6 | uppercase }}</p>
In diesem Fall wird zuerst die `slice`-Pipe verwendet, um die ersten sechs Zeichen zu extrahieren, und anschließend die `uppercase`-Pipe, um den Text in Großbuchstaben umzuwandeln.
Die Ausgabe lautet:
ANGULA
Asynchrone Daten mit der AsyncPipe verarbeiten
Eine besondere Pipe in Angular ist die AsyncPipe. Sie ermöglicht es, Observables oder Promises direkt im Template zu verwenden, ohne manuell auf die Daten zu warten. Die AsyncPipe übernimmt das Abonnieren und Entpacken von Observables und aktualisiert die Anzeige automatisch, wenn neue Daten verfügbar sind.
Beispiel:
import { Component } from '@angular/core';
import { Observable, of } from 'rxjs';
@Component({
selector: 'app-async-example',
template: `<p>{{ data$ | async }}</p>`
})
export class AsyncExampleComponent {
data$: Observable<string> = of('Daten sind geladen!');
}
Die AsyncPipe abonniert das Observable `data$` und zeigt die Daten an, sobald sie verfügbar sind. Dies ist besonders nützlich, wenn du mit asynchronen Daten wie HTTP-Anfragen oder WebSockets arbeitest.
Fazit
Pipes in Angular sind ein flexibles Werkzeug, um Daten in Templates schnell und einfach zu transformieren. Ob es darum geht, einfache Formatierungen wie Datums- oder Währungsangaben vorzunehmen oder komplexere Transformationen durch benutzerdefinierte Pipes zu erstellen – Angular bietet alles, was du brauchst, um deine Daten benutzerfreundlich anzuzeigen. Durch die Möglichkeit, eigene Pipes zu erstellen und Pipes zu kombinieren, kannst du die volle Kontrolle über die Darstellung und Formatierung deiner Daten übernehmen.
