Ένα Observable (από τη βιβλιοθήκη RxJS) αντιπροσωπεύει ένα ρεύμα τιμών με την πάροδο του χρόνου στο οποίο μπορείτε να εγγραφείτε. Το Angular χρησιμοποιεί το RxJS διακριτικά — HTTP αιτήματα, συμβάντα δρομολογητή, φόρμες και EventEmitter είναι όλα βασισμένα σε Observable — επομένως η κατανόησή τους είναι απαραίτητη.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Tα Observables μπορούν να εκπέμπουν πολλαπλές τιμές, εκτελούνται μόνο κατά την εγγραφή και μπορούν να ακυρωθούν (διακοπεί) — καθιστώντας τα ιδανικά για συμβάντα, ρεύματα και HTTP που ίσως θέλετε να ακυρώσετε.
import { HttpClient } from "@angular/common/http";
this.http.get<User[]>("/api/users").subscribe({
next: (users) => this.users = users, // each emitted value
error: (err) => console.error(err), // on error
complete: () => console.log("done"), // stream finished
});
Τίποτα δεν συμβαίνει μέχρι να καλέσετε .subscribe() — το Observable είναι lazy.
import { map, filter, debounceTime } from "rxjs/operators";
this.searchInput.valueChanges.pipe(
debounceTime(300), // wait for typing to pause
filter(text => text.length > 2), // ignore short queries
map(text => text.trim()), // transform
).subscribe(query => this.search(query));
Oι Operators (αλυσιδωτοί μέσα στο .pipe()) μετατρέπουν δηλωτικά το ρεύμα — debounce, filter, map κ.λπ. — λύνοντας κοινά προβλήματα async (όπως search-as-you-type) κομψά.
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Οι χειροκίνητες εγγραφές πρέπει να καθαρίζονται στο ngOnDestroy, διαφορετικά συνεχίζουν να εκτελούνται μετά το κλείσιμο του στοιχείου — διαρροή μνήμης. Κοινές λύσεις: το async pipe (αυτόματη ακύρωση), ή takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Tα RxJS Observables είναι δεμένα σε όλο το Angular — δεν μπορείτε να χρησιμοποιήσετε HttpClient, reactive forms ή τον δρομολογητή χωρίς αυτά.
Η κατανόηση της εγγραφής, των operators και ιδιαίτερα της ακύρωσης (ή της χρήσης του async pipe για να αποφύγετε τη χειροκίνητη διαχείριση) είναι κρίσιμη: είναι τόσο η πηγή της δύναμης του Angular για ασύγχρονα δεδομένα όσο και ένας από τους πιο συνηθισμένους παγίδες (διαρροές από ξεχασμένες εγγραφές).