Zeichenkette mit einem Pipe in Angular abschneiden

Lernen wir, den SlicePipe zu verwenden. Diese Pipe ermöglicht es, eine Zeichenkette abzuschneiden. Dabei akzeptiert sie Parameter, die den Start- und Endindex für den Ausschnitt festlegen. Um Parameter zu übergeben, setzt man nach dem Namen der Pipe einen Doppelpunkt und listet die Parameter auf.

Sehen wir uns ein Beispiel an. In der Klasse der Komponente definieren wir eine Eigenschaft name:

app/app.component.tsexport class AppComponent {
  name: string = 'john';
}

Und nun schneiden wir mit der SlicePipe die Zeichenkette zu, indem wir den Start- und den Endindex angeben:

app/app.component.html<div>
  {{ name | slice:0:2 }}
</div>

Das Ergebnis wird folgendes sein:

app/app.component.html<div>
  jo
</div>