Περικοπή συμβολοσειράς μέσω σωλήνα στο Angular

Ας μάθουμε πώς να χρησιμοποιούμε τον σωλήνα SlicePipe. Αυτός ο σωλήνας επιτρέπει την περικοπή μιας συμβολοσειράς. Παράλληλα δέχεται παραμέτρους, οι οποίες ορίζουν την αρχική και την τελική θέση της περικοπής. Για τη μετάδοση παραμέτρων μετά το όνομα του σωλήνα τοποθετείται άνω και κάτω τελεία και παρατίθενται οι παράμετροι.

Ας δούμε ένα παράδειγμα. Στην κλάση του component ας ορίσουμε την ιδιότητα name:

export class AppComponent {
	name: string = 'john';
}

Και τώρα χρησιμοποιώντας τον σωλήνα SlicePipe ας περικόψουμε τη συμβολοσειρά, ορίζοντας την αρχική και την τελική θέση:

<div>
	{{ name | slice:0:2 }}
</div>

Ως αποτέλεσμα θα πάρουμε το εξής:

<div>
	jo
</div>

Δημιουργήστε μια συμβολοσειρά που περιλαμβάνει 11 χαρακτήρες. Εμφανίστε στην οθόνη το τμήμα από την 2 έως την 4 θέση.