Ποια είναι τα lifecycle hooks των components του Angular;

Question

Accepted Answer

**Lifecycle hooks** είναι μέθοδοι που το Angular καλεί σε συγκεκριμένες στιγμές στη ζωή ενός component — δημιουργία, αλλαγές input, rendering και καταστροφή. Τα υλοποιείτε προσθέτοντας interface methods στην κλάση του component σας.

## Τα κύρια hooks με σειρά

```ts
import { Component, OnInit, OnDestroy, OnChanges, SimpleChanges } from "@angular/core";

@Component({ ... })
export class MyComponent implements OnInit, OnDestroy, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
    // called when an @Input value changes (before ngOnInit the first time)
  }
  ngOnInit() {
    // called ONCE after the first ngOnChanges — do initialization, fetch data
  }
  ngOnDestroy() {
    // called just before the component is removed — CLEAN UP here
  }
}
```

## Η πλήρης σειρά

```text
constructor          → DI happens; inputs NOT yet available
ngOnChanges          → when @Input values are set/changed
ngOnInit             → once, after first ngOnChanges ★ (init, fetch data)
ngDoCheck            → every change detection run (custom change detection)
ngAfterContentInit   → projected content (<ng-content>) initialized
ngAfterViewInit      → the component's view + child views ready ★ (access @ViewChild)
ngAfterViewChecked   → after each view check
ngOnDestroy          → before removal ★ (unsubscribe, clear timers)
```

## Τα τρία που χρησιμοποιείτε περισσότερο

```ts
ngOnInit() {
  this.userService.getUsers().subscribe(u => this.users = u); // init/fetch — inputs are ready
}
ngAfterViewInit() {
  this.chart.nativeElement.focus(); // the DOM/@ViewChild exists now
}
ngOnDestroy() {
  this.subscription.unsubscribe();   // prevent memory leaks!
  clearInterval(this.timer);
}
```

- **`ngOnInit`** — το standard μέρος για αρχικοποίηση και ανάκτηση δεδομένων (σε αντίθεση με το constructor, τα `@Input`s είναι διαθέσιμα εδώ).
- **`ngAfterViewInit`** — όταν υπάρχουν child views και αναφορές `@ViewChild`.
- **`ngOnDestroy`** — καθαρισμός: ακύρωση εγγραφής από Observables, διαγραφή timers, αφαίρεση listeners.

## Γιατί ngOnInit αντί για constructor

Το constructor θα πρέπει να κάνει μόνο DI. τα inputs δεν είναι δεμένα ακόμα εκεί. Το `ngOnInit` εκτελείται αφού το Angular έχει ρυθμίσει το component και τα inputs του — το σωστό μέρος για startup logic.

## Γιατί έχει σημασία

Τα Lifecycle hooks σας επιτρέπουν να εκτελέσετε logic στη σωστή στιγμή — αρχικοποιήστε στο `ngOnInit`, αποκτήστε πρόσβαση στο rendered view στο `ngAfterViewInit`, και κρίσιμα **κάντε καθαρισμό στο `ngOnDestroy`** (η ακύρωση εγγραφής από Observables είναι ο καλύτερος τρόπος για να αποφύγετε memory leaks στο Angular).

Η γνώση της σειράς και του ρόλου κάθε hook είναι απαραίτητη για σωστή ανάκτηση δεδομένων, πρόσβαση DOM και διαχείριση πόρων.