Benutzerdefinierte Pipes

Wie das vorige Kapitel gezeigt hat, sind die in Angular integrierten Pipes leistungsfähig und vielseitig. Dennoch decken sie nicht immer alle Anforderungen ab. In solchen Fällen bietet es sich an, eigene Pipes zu entwickeln. Das ist in Angular mit geringem Aufwand möglich.

Eine Pipe beginnt als TypeScript-Datei. Üblich ist die Benennung nach dem Muster nameDerPipe.pipe.ts. Im folgenden Beispiel wird eine Pipe erstellt, die einen String auf eine vorgegebene Länge verkürzt. Der Pipe-Name lautet truncate, die Datei heißt demnach truncate.pipe.ts.

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

@Pipe({
  name: 'truncate',
  standalone: true
})

export class TruncatePipe implements PipeTransform {

  transform(value: string, length : number): string {
    return "";
  }
}

Wesentliche Bestandteile sind der Import von Pipe und PipeTransform sowie die Deklaration mit @Pipe. Die Angabe implements PipeTransform verlangt zwingend die Implementierung einer transform-Methode. Aus der Signatur der transform-Methode lässt sich bereits ablesen, wie die Pipe eingesetzt wird: Als Eingabe kommt ein String (value) und zusätzlich ein Parameter für die gewünschte Länge (length). Der Rückgabewert ist ebenfalls ein String. Was fehlt, ist die konkrete Logik, die den übergebenen Text tatsächlich kürzt. Diese wird im nächsten Listing gezeigt.

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

@Pipe({
  name: 'truncate',
  standalone: true
})

export class TruncatePipe implements PipeTransform {

  transform(value: string, length : number = 20): string {
    if (value.length <= length)
      return value;
    return value.slice(0, length) + '…';
  }
}

Neben der Implementierung der eigentlichen Logik zum Verkürzen des Strings enthält diese Version der Pipe eine weitere kleine Verbesserung. Für den Parameter length wurde ein Standardwert von 20 gesetzt. Dadurch kann die Pipe auch ohne eine explizite Längenangabe verwendet werden. Der Text wird in diesem Fall automatisch auf 20 Zeichen gekürzt.

Die Verwendung dieser benutzerdefinierten Pipe entspricht anschließend vollständig der Arbeitsweise der bereits in Angular integrierten Pipes. In Verbindung mit einer String Interpolation genügt der senkrechte Strich, das Pipe-Symbol, um einen Wert mithilfe der Pipe zu transformieren.

<h1>Custom Pipe with parameter</h1>
<p>{{ longText | truncate:50 }}</p>

<h1>Custom Pipe without parameter</h1>
<p>{{ longText | truncate }}</p>

Ebenfalls wie bei den integrierten Pipes, muss diese benutzerdefinierte Pipe in der Komponente, in der sie verwendet werden soll, importiert werden.

import { Component } from '@angular/core';
import { TruncatePipe} from "./truncate.pipe";

@Component({
  selector: 'app-sample-custom-pipe',
  standalone: true,
  imports: [TruncatePipe],
  templateUrl: './sample-custom-pipe.component.html',
  styleUrl: './sample-custom-pipe.component.scss'
})
export class SampleCustomPipeComponent {

  longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
}