Integrierte Pipes

Pipes sind ein weiterer nützlicher Baustein im Werkzeugkasten von Angular. Sie kommen zum Einsatz, wenn ein Wert für die Anzeige umgewandelt werden soll, der konvertierte Wert jedoch nur in der View benötigt wird. Typische Beispiele sind die Formatierung von Zahlen mit Dezimaltrennzeichen oder eine benutzerfreundliche Darstellung von Datum und Uhrzeit. Pipes selbst sind einfache Funktionen, die einen Eingabewert entgegennehmen und einen transformierten Wert zurückgeben. Einige Pipes akzeptiern zusätzlich Parameter, um das Ergebnis weiter anzupassen.
Ein großer Vorteil von Pipes ist ihre Wiederverwendbarkeit: Eine einmal deklarierte Pipe kann in der gesamten Anwendung verwendet werden. Eigene, benutzerdefinierte Pipes lassen sich leicht erstellen. Dieses Thema wird jedoch in einem späteren Kapitel behandelt denn Angular stellt bereits eine Reihe integrierter Pipes zur Verfügung, die viele alltägliche Aufgaben in der Entwicklung erheblich vereinfachen.
 Die integrierten Pipes sind bereits sehr leistungsfähig und bieten eine einfache Möglichkeit, Daten direkt im Template zu formatieren, ohne zusätzlichen Code in der Komponente zu schreiben. Man sollte sie kennen vor allem, weil ihre Verwendung sehr einfach ist.

Die einfachsten Beispiele für Pipes sind vermutlich uppercase und lowercase. Sie konvertieren einen Text vollständig in Groß- beziehungsweise Kleinbuchstaben. Die Syntax ist dabei sehr einfach, besonders, wenn die Pipe innerhalb einer String Interpolation verwendet wird. Hinter dem Variablennamen folgt ein senkrechter Strich (das sogenannte Pipe-Symbol), gefolgt vom Namen der Pipe. Mehr ist an dieser Stelle nicht erforderlich.

<h2>Uppercase and Lowercase Pipes</h2>
<div> {{ sampleName | uppercase }} </div>
<div> {{ sampleName | lowercase }} </div>

Eng mit den zwei vorherigen Pipes verwand ist die titlecase-Pipe. Sie wandelt jeden Wortanfang in einen Großbuchstaben um. Solch eine Formatierung kommt oft bei Überschriften zum Einsatz.

<h2>Titlecase Pipes</h2>
<div> {{ sampleName | titlecase }} </div>

Ein weiteres häufig genutztes Beispiel ist die number-Pipe. Sie dient zur Formatierung von Zahlen und kann einen Parameter entgegennehmen.
 Der durch einen Punkt (.) getrennte Format-String bestimmt, wie die Zahl angezeigt wird. Der erste Wert definiert die Mindestanzahl der Ziffern vor dem Komma. Ist die Zahl selbst nicht groß genug, wird sie mit führenden Nullen aufgefüllt.Der zweite Teil legt die minimale und maximale Anzahl der Nachkommastellen fest. Auch hier werden gegebenenfalls Nullen ergänzt, wenn die Zahl nicht genügend Nachkommastellen besitzt. Wird die Anzahl der Nachkommastellen reduziert, erfolgt automatisch eine Rundung des Werts.

<h2>Number Pipe with formatting</h2>
<div> {{ sampleValue | number: '1.2-2' }} </div>
<div> {{ sampleValue | number: '8.2-3' }} </div>
<div> {{ sampleValue | number: '1.8' }} </div>

Mit der number-Pipe verwand ist die currency-Pipe zur Anzeige von Währungen. Durch einen zusätzliche Parameter wird bestimmt, ob das Währungssymbol (zb. € oder $) angezeigt werden soll. oder lediglich der Währungscode.

<h2>Currency Pipe with Currency Symbol</h2>
<div> {{ sampleCurrency | currency: 'EUR' :true : '1.3-3' }} </div>
<div> {{ sampleCurrency | currency: 'JPY' :true : '1.2' }} </div>

<h2>Currency Pipe with Currency Name</h2>
<div> {{ sampleCurrency | currency: 'EUR' :false : '1.3-3' }} </div>
<div> {{ sampleCurrency | currency: 'JPY' :false : '1.2' }} </div>

Die DatePipe dient in erster Linie zur Formatierung von Werten des Typs Date. Da dieser Datentyp sowohl das Datum als auch die Uhrzeit enthält, wird nicht in jeder Situation beides benötigt. Mit der DatePipe lässt sich gezielt steuern, welche Bestandteile angezeigt werden sollen.
 Angular stellt dafür bereits zwölf vordefinierte Formate bereit, um Datum und Zeit unterschiedlich darzustellen. Für eine vollständige Übersicht empfiehlt sich ein Blick in die offizielle Angular-Dokumentation.

<h2>Date Pipe with different formatting</h2>
<div> {{ sampleDate | date }}</div>
<div> {{ sampleDate | date:'short' }}</div>
<div> {{ sampleDate | date:'mediumTime' }}</div>

Die json-Pipe ist hilfreich, um den Inhalt eines Objekts sichtbar zu machen.
 Eine einfache String-Interpolation eines Objekts würde lediglich den Objekttyp ausgeben. In der Regel also etwas wie [object Object]. Das ist selten das gewünschte Ergebnis. Wird dagegen die json-Pipe verwendet, zeigt die Ausgabe die komplette Struktur des Objekts im JSON-Format. Das ist besonders praktisch, um während der Entwicklung schnell zu überprüfen, welche Daten tatsächlich vorliegen.

<h2>An Object with and without JSON Pipe</h2>
<div> {{ sampleObject }} </div>
<div> {{ sampleObject | json }} </div>

Die percent-Pipe kommt zum Einsatz, um einen Dezimalbruch als Prozentwert darzustellen. Der Wert 1.0 entspricht dabei 100 %, 0.5 ergibt 50 %, und 5 wird als 500 % angezeigt.

<h2>Percent Pipes</h2>
<div> {{ percentageSample | percent }} </div>

Die slice-Pipe wird verwendet, wenn nur ein Teilbereich eines Arrays in der View angezeigt werden soll. Sie akzeptiert zwei Parameter, die den Start- und den Endindex des anzuzeigenden Bereichs festlegen. Wie bei Arrays üblich, besitzt das erste Element den Index 0.
 Wird eine Endposition angegeben, die größer ist als die tatsächliche Länge des Arrays, führt das erfreulicherweise nicht zu einem Fehler. Die Ausgabe endet einfach mit dem letzten verfügbaren Element.

<h2>Slice Pipes</h2>
<div> {{ arraySample | slice: 0:4 }} </div>
<div> {{ arraySample | slice: 2:15 }} </div>

Zum Abschluss der komplette Code der TypeSkript-Komponente. Beachtenswert ist, dass jede Pipe einzeln importiert werden muss.

<h1>Inbuild Pipes Sample</h1>

<h2>Uppercase and Lowercase Pipes</h2>
<div> {{ sampleName | uppercase }} </div>
<div> {{ sampleName | lowercase }} </div>

<h2>Titlecase Pipes</h2>
<div> {{ sampleName | titlecase }} </div>

<h2>Number Pipe with formatting</h2>
<div> {{ sampleValue | number: '1.2-2' }} </div>
<div> {{ sampleValue | number: '8.2-3' }} </div>
<div> {{ sampleValue | number: '1.8' }} </div>

<h2>Currency Pipe with Currency Symbol</h2>
<div> {{ sampleCurrency | currency: 'EUR' :true : '1.3-3' }} </div>
<div> {{ sampleCurrency | currency: 'JPY' :true : '1.2' }} </div>

<h2>Currency Pipe with Currency Name</h2>
<div> {{ sampleCurrency | currency: 'EUR' :false : '1.3-3' }} </div>
<div> {{ sampleCurrency | currency: 'JPY' :false : '1.2' }} </div>

<h2>Date Pipe with different formatting</h2>
<div> {{ sampleDate | date }}</div>
<div> {{ sampleDate | date:'short' }}</div>
<div> {{ sampleDate | date:'mediumTime' }}</div>

<h2>An Object with and without JSON Pipe</h2>
<div> {{ sampleObject }}</div>
<div> {{ sampleObject | json }}</div>

<h2>Percent Pipes</h2>
<div> {{ percentageSample | percent }} </div>

<h2>Slice Pipes</h2>
<div> {{ arraySample | slice: 0:4 }} </div>
<div> {{ arraySample | slice: 2:15 }} </div>

import { Component } from '@angular/core';
import {
  CurrencyPipe,
  DatePipe,
  DecimalPipe,
  LowerCasePipe,
  UpperCasePipe,
  JsonPipe,
  PercentPipe,
  SlicePipe,
  TitleCasePipe
} from "@angular/common";

@Component({
  selector: 'app-sample-pipes',
  standalone: true,
  imports: [
    UpperCasePipe,
    LowerCasePipe,
    DecimalPipe,
    CurrencyPipe,
    DatePipe,
    JsonPipe,
    PercentPipe,
    SlicePipe,
    TitleCasePipe
  ],
  templateUrl: './sample-pipes.component.html',
  styleUrl: './sample-pipes.component.scss'
})
export class SamplePipesComponent {

  sampleName : string = 'John of Johnson, 123 Main St.';
  sampleValue : number = 12345.6789;
  sampleCurrency : number = 12345.6789;
  sampleDate : Date = new Date();
  sampleObject : any = {
    name: 'John', lastname: 'Foe', age: 30 ,
    address: {street: 'Main St.', city: 'Grovers Mill', state: 'NJ'}
  };
  percentageSample : number = 0.5;
  arraySample : Array<string> = ['a1','b2','c3','d4','e5',"d6"];
}