Τι είναι pipes στο Angular;

Question

Accepted Answer

**Pipes** μετασχηματίζουν δεδομένα **για εμφάνιση** απευθείας στα templates, χρησιμοποιώντας τον τελεστή `|`. Σας επιτρέπουν να μορφοποιήσετε τιμές (ημερομηνίες, νομίσματα, κείμενο) χωρίς να αλλάξετε τα υποκείμενα δεδομένα ή να γράψετε λογική μετασχηματισμού στο component. ## Χρήση ενσωματωμένων pipes ```html

``` Η τιμή στα αριστερά περνά μέσα από το pipe. τα ορίσματα ακολουθούν μια άνω και κάτω τελεία (`date:'longDate'`). ## Αλυσίδωση pipes ```html

``` ## Το async pipe — μια ξεχωριστή περίπτωση ```html

``` Το `async` είναι ιδιαίτερα σημαντικό: εγγράφεται σε ένα Observable (π.χ. ένα αποτέλεσμα HTTP), αποδίδει την εκπεμπόμενη τιμή, και **αποεγγράφεται αυτόματα** όταν το component καταστραφεί — αποτρέποντας διαρροές μνήμης χωρίς χειροκίνητη διαχείριση συνδρομής. ## Δημιουργία ενός προσαρμοσμένου pipe ```ts import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "truncate" }) export class TruncatePipe implements PipeTransform { transform(value: string, limit = 20): string { return value.length > limit ? value.slice(0, limit) + "…" : value; } } // usage: {{ longText | truncate:50 }} ``` ## Καθαρά vs ακάθαρτα pipes ```text Pure (default): re-runs only when the input REFERENCE changes → efficient (cached) Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering) ``` Τα καθαρά pipes αποθηκεύονται στη cache και επανυπολογίζονται μόνο όταν αλλάζει η είσοδός τους — γعینοντάς τα αποδοτικά. ## Γιατί έχει σημασία Τα Pipes διατηρούν τη μορφοποίηση δεδομένων δηλωτική και στο template όπου ανήκει, ξεχωριστή από τη λογική του component — επαναχρησιμοποιήσιμα, αλυσιδωτά, και (όταν είναι καθαρά) αποδοτικά. Τα ενσωματωμένα pipes καλύπτουν τη συνηθισμένη μορφοποίηση, τα προσαρμοσμένα pipes χειρίζονται μετασχηματισμούς ειδικούς για την εφαρμογή, και το `async` pipe είναι ο ιδιωματικός, χωρίς διαρροές τρόπος για εμφάνιση δεδομένων Observable — ένα πρότυπο που θα χρησιμοποιήσετε συνεχώς στο Angular.