Angular యొక్క కాంపోనెంట్ లైఫ్‌సైకిల్ హుక్‌లు ఏమిటి?

Question

Accepted Answer

**లైఫ్‌సైకిల్ హుక్‌లు** Angular కాంపోనెంట్ యొక్క జీవితంలో నిర్దిష్ట సమయాలలో పిలిచే పద్ధతులు — సృష్టి, ఇన్‌పుట్ మార్పులు, రెండరింగ్ మరియు విధ్వంసం. మీ కాంపోనెంట్ క్లాస్‌కు ఇంటర్‌ఫేస్ పద్ధతులను జోడించడం ద్వారా మీరు వాటిని అమలు చేస్తారు.

## క్రమంలో ప్రధాన హుక్‌లు

```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`** — ప్రారంభం మరియు డేటా ఫెచింగ్ కోసం ప్రామాణిక స్థానం (కన్‌స్ట్రక్టర్ కాకుండా, `@Input`లు ఇక్కడ అందుబాటులో ఉన్నాయి).
- **`ngAfterViewInit`** — చైల్డ్ వ్యూలు మరియు `@ViewChild` సూచనలు ఉన్నప్పుడు.
- **`ngOnDestroy`** — స청్చన: పర్యవేక్షణలను విడిచిపెట్టండి, టైమర్‌లను క్లియర్ చేయండి, శ్రవణకారులను తీసివేయండి.

## కన్‌స్ట్రక్టర్‌కు బదులుగా ngOnInit ఎందుకు

కన్‌స్ట్రక్టర్ DI మాత్రమే చేయాలి; ఇన్‌పుట్‌లు ఇంకా బంధించబడలేదు. `ngOnInit` Angular కాంపోనెంట్ మరియు దాని ఇన్‌పుట్‌లను సెటప్ చేసిన తర్వాత నడుస్తుంది — స్టార్టআప్ లాజిక్ కోసం సరైన స్థానం.

## ఇది ఎందుకు కూడా ఉండాలి

లైఫ్‌సైకిల్ హుక్‌లు సరైన సమయంలో లాజిక్‌ను అమలు చేయడానికి మిమ్మల్ని అనుమతిస్తాయి — `ngOnInit`లో ప్రారంభించండి, `ngAfterViewInit`లో రెండర్ చేయబడిన వ్యూను యాక్సెస్ చేయండి, మరియు ముఖ్యంగా `ngOnDestroy`లో **సమ్మోహనం చేయండి** (పర్యవేక్షణల నుండి విడిపోవడం Angular లో మెమరీ లీక్‌లను నివారించే #1 మార్గం).

ప్రతి హుక్ యొక్క క్రమం మరియు పాత్రను తెలుసుకోవడం సరైన డేటా ఫెచింగ్, DOM ప్రాప్యతా మరియు వనరుల నిర్వహణ కోసం చాలా అవసరం.