Sie möchten Daten auf eine bestimmte Art und Weise verarbeiten und anzeigen. Dann sollten Sie Pipes verwenden, anstatt eine Funktion in einer Komponente zu verwenden oder zu erstellen.

Sie können vorhandene Pipes verwenden oder eine eigene Pipe erstellen, was wir in diesem Lernprogramm tun werden.

Vorhandene Pipes können direkt in der HTML Ihrer Komponente verwendet werden.

Beispiele von Pipes

UpperCasePipe - Textzeichenfolge in Großbuchstaben umwandeln.
Verwendung:

myString | uppercase

 

DatePipe - Datum in einem bestimmten Format formatieren.
Verwendung:

myDateObject | date: 'dd/MM/yy hh:mm'

Erstellen Sie Ihr eigenes Pipe

Eine Pipe kann durch Hinzufügen einer Typescript-Klasse erstellt werden, die die Schnittstelle "PipeTransform" implementiert. Ihr Code, der die Daten (die Sie anzeigen möchten) verarbeitet, wird in der Methode "transform" geschrieben.
Sie können diesen "ng"-Befehl verwenden, um die Pipe über Ihr Terminal zu erstellen:

ng g pipe myPipe

Beispiel AgeGroup

Dieses Pipe zeigt die Altersgruppe für ein bestimmtes Alter einer Person an. Sie zeigt an, ob die Person ein Säugling ("infant"), ein Minderjähriger ("minor") oder ein Erwachsener ("adult") ist.

import { Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'ageGroup'})
export class AgeGroupPipe implements PipeTransform {
    transform(age: number): string {
        if(age < 6) {
            return "infant";
        } else if( age < 18) {
            return 'minor';
        } else {
            return 'adult';
        }
    }
}

Der Name der Pipe wird in der Annotation "@Pipe" definiert. Sie müssen den Code für Ihre Pipe in der Methode "transform" schreiben, die implementiert werden muss.
"age" ist der Wert der Variable, die vor die Pipe geschrieben wird.
Der Rückgabewert dieser Methode "transform" ist der Wert, der angezeigt wird, wenn Sie diese Pipe verwenden.

Sie können diese Methode nun in Ihrem HTML-Code für Ihre Komponente wie folgt verwenden:

{{personAge | ageGroup}}

Wenn die Variable "personAge" den Wert "17" hat, dann wird die Zeichenfolge "minor" angezeigt.

Mehr über Pipes:
https://angular.io/api/core/PipeTransform
https://angular.io/guide/pipes