Quali sono i lifecycle hook dei componenti Angular?

Question

Accepted Answer

I **lifecycle hook** sono metodi che Angular chiama in momenti specifici della vita di un componente — creazione, cambiamenti di input, rendering e distruzione. Li implementi aggiungendo i metodi dell'interfaccia alla tua classe componente.

## I principali hook in ordine

```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
  }
}
```

## La sequenza completa

```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)
```

## I tre che usi di più

```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`** — il posto standard per l'inizializzazione e il recupero dati (a differenza del costruttore, gli `@Input` sono disponibili qui).
- **`ngAfterViewInit`** — quando le viste figlie e i riferimenti `@ViewChild` esistono.
- **`ngOnDestroy`** — pulizia: cancellati gli abbonamenti agli Observable, cancella i timer, rimuovi i listener.

## Perché ngOnInit invece del costruttore

Il costruttore dovrebbe fare solo DI; gli input non sono ancora collegati lì. `ngOnInit` viene eseguito dopo che Angular ha configurato il componente e i suoi input — il posto corretto per la logica di avvio.

## Perché è importante

I lifecycle hook ti permettono di eseguire la logica al momento giusto — inizializzare in `ngOnInit`, accedere alla vista renderizzata in `ngAfterViewInit`, e soprattutto **pulire in `ngOnDestroy`** (cancellare gli abbonamenti agli Observable è il #1 modo per evitare memory leak in Angular).

Conoscere l'ordine e il ruolo di ogni hook è essenziale per il corretto recupero dati, accesso al DOM e gestione delle risorse.