Care sunt hookurile ciclului de viață al componentei Angular?

Question

Accepted Answer

**Hookurile ciclului de viață** sunt metode pe care Angular le apelează la momente specifice în viața unei componente — creație, schimbări de intrare, redare și distrugere. Le implementezi adăugând metode de interfață la clasa componentei tale.

## Hookurile principale în 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
  }
}
```

## Secvența completă

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

## Cele trei pe care le folosești cel mai mult

```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`** — locul standard pentru inițializare și preluarea datelor (spre deosebire de constructor, `@Input`s sunt disponibile aici).
- **`ngAfterViewInit`** — când vizualizările copil și referințele `@ViewChild` există.
- **`ngOnDestroy`** — curățenie: dezabonați-vă de la Observables, ștergeți cronometrele, eliminați ascultătorii.

## De ce ngOnInit peste constructor

Constructorul ar trebui să facă doar DI; intrările nu sunt încă legate acolo. `ngOnInit` rulează după ce Angular a configurat componenta și intrările sale — locul corect pentru logica de pornire.

## De ce este important

Hookurile ciclului de viață vă permit să executați logica la momentul potrivit — inițializați în `ngOnInit`, accesați vizualizarea redată în `ngAfterViewInit` și în mod crucial **curățați în `ngOnDestroy`** (dezabonarea de la Observables este modalitatea #1 de a evita scurgerile de memorie în Angular).

Cunoașterea ordinii și rolului fiecărui hook este esențială pentru preluarea corectă a datelor, accesul la DOM și gestionarea resurselor.