Pipes – Formatierung für die Benutzerpräsetation (Folge 9)

Um Daten vor der Darstellung an den Benutzer zu formatieren, nutzen wir in Angular Pipes. Pipes erlauben es, die Daten im Template zu transformieren, ohne die Ausgangsdatensatz zu verändern. Ein typisches Beispiel für die Nutzung von Pipes ist die Ausgabe eines Datums. Das interne Objekt-Property oder Variable haben den Datentyp Date und der Benutzer erwartet Tag/Monat/Jahr. Ggfs. beinhaltet das Datum auch die Uhrzeit, die für eine andere Stelle relevant ist. Wir sehen dabei, dass die Formatierung für den Anwender kann ein verlustbehaftetes Verfahren sein.

Standard Pipes in Angular

Angular liefert uns einige Pipes out-of-box mit. Eine kurze Übersicht:

• LowerCasePipe: Wandelt den String in Kleinbuchstaben

• UpperCasePipe: Alles in Großbuchstaben

• DecimalPipe: Formatieren von Nummern

• DatePipe: Formatierung eines Datums

Anwenden einer Pipe

Eine Pipe verwenden wir im Template und kann bei String Interpolation sowie Property Binding verwendet werden. String Interpolation und Property Binding sind zwei verschiedene Arten von Bindings, die vom TypeScript Klasse zum Template kommunizieren. Zu Bindings gab es eine eigene Podcast Folge, die du hier anhören kannst. Die Pipes können nicht in Event- oder Two-Way-Binding verwendet werden. Darüber hinaus gibt es die Möglichkeit Pipes zu parametrisieren und mehrere Pipes zu verketten.

Einfaches Beispiel für das Anwenden der Uppercase-Pipe

<p>Angular in Großbuchstaben lautet: {{'Angular' | uppercase }}</p>

Property Binding und Pipes

<span [title]="'Tool-Tipp' | lowercase">Text mit einem Tool-Tipp</span>

Parametrisieren von Pipes

<p>Heute ist {{ new Date() | date:"dd.MM.yy" }}</p>

Verwendung von mehreren Pipes

<p>Der erste Buchstabe lautet: {{ 'abcdefghij' | slice:0:1 | uppercase }}</p>

Eigene Pipes erstellen

Eigene Pipes können mit Hilfe der Angular CLI mit dem Befehl ng generate pipe Sample erzeugt werden. Die erstellte TypeScript Klasse hat den Decorator @Pipe und implementiert das Interface PipeTransform. In der Methode transform werden die Daten für die Ausgabe im Template verändert. Neben dem Variablenwert bekommt die Methode noch Parameter und Methode soll eine Ausgabe zurückliefern.

@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
  transform(value: number, exponent: string): number {
    let exp = parseFloat(exponent);
    return Math.pow(value, isNaN(exp) ? 1 : exp);
  }
}

Pure vs. Impure Pipe

Jetzt blicken wir unter die Hube: Der Unterschied zwischen pure und impure Pipes. Alle Pipes, die wir bis jetzt kennengelernt haben, waren pure Pipes. Eine Ausführung der Pipe erfolgt nur bei einer echten Änderung: Also entweder bei einer Wertänderung eines primitiven Datentype wie number oder bei Änderungen der Objektreferenzen. Dabei werden Wertänderungen bei einzelnem Wert von zusammengesetzten Objekten ignoriert. Dadurch ist diese Mechanismus sehr schnell, jedoch auch restriktiv. Eine impure Pipe dagegen wird bei jedem Change Detection Lauf ausgeführt. Das hat zur Folge, dass bei jeder Benutzerinteraktion wie mouseOver oder keyDown und bei Anpassungen von Komponenten oder Direktiven Properties die Pipe ausgeführt wird. Eine impure Pipe wird sehr häufig ausgeführt.

Async Pipe

Eine Standard impure Pipe ist die Async Pipe. Diese Async Pipe ist für die Darstellung von Promises und Observables da. Da diese Objekte den Wert über die Zeit verändern, merkt sich die Async Pipe den alten Wert und arbeitet damit stateful.

@Component({
  selector: 'app-async-beispiel',
  template: `<p>Message: {{ message$ | async }}</p>`,
})
export class AsyncBeispielComponent {
  message$: Observable<string>;
 
  private messages = [
    'Erste Nachricht',
    'Zweite',
    'Dritte Nachricht und damit die Letzte!'
  ];
 
  constructor() { this.resend(); }
 
  resend() {
    this.message$ = interval(500).pipe(
      map(i => this.messages[i]),
      take(this.messages.length)
    );
  }
}

In der Podcast Episode gibt außerdem noch drei Tipps zu Pipes. Wenn dir diese Folge gefallen hat, freue ich mich auf eine Bewertung auf iTunes. Hast du ein Thema, was dich brennend interessiert, dann schreibe es mir. Du erreichst mich auf XING und Facebook. Leite den Artikel an Entwickler weiter, der diesen Artikel lesen sollte. Ich freue mich auf die nächste Folge.