Mik az Angular komponens-életciklus hook-jai?

Question

Accepted Answer

A **Lifecycle hooks** metódusok, amelyeket az Angular a komponens életének meghatározott pillanataiban hív meg — létrehozás, bemeneti változások, renderelés és megsemmisítés. Az implementációjuk a komponens osztályhoz interfész metódusok hozzáadásával történik.

## The main hooks in order

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

## The full sequence

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

## The three you use most

```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`** — az inicializálás és adatleküldés standard helye (a konstruktorral ellentétben, a `@Input`s itt elérhetők).
- **`ngAfterViewInit`** — amikor a gyermek nézetek és `@ViewChild` hivatkozások léteznek.
- **`ngOnDestroy`** — takarítás: leiratkozás az Observables-ből, időzítők törlése, hallgatók eltávolítása.

## Why ngOnInit over the constructor

A konstruktór csak DI-t végezhet; a bemenetek még nincsenek kötve. Az `ngOnInit` az Angular beállítása után fut a komponens és annak bemenetei — a helyes hely az indítási logikához.

## Miért fontos ez

Az életciklus hook-ok lehetővé teszik, hogy a logikát a megfelelő időben futtassa — inicializálás az `ngOnInit`-ben, a renderelt nézet elérése az `ngAfterViewInit`-ben, és kritikusan **takarítás az `ngOnDestroy`-ban** (az Observable-ből való leiratkozás az #1. módszer a memóriaszivárgások megelőzésére az Angular-ban).

Minden hook sorrendjének és szerepének ismerete elengedhetetlen a megfelelő adatleküldéshez, DOM-eléréshez és erőforrás-kezeléshez.