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`** — क्लीनअप: Observable वरून अनसबस्क्राइब करा, टाइमर साफ करा, श्रोता काढून टाका.

## कन्स्ट्रक्टरऐवजी ngOnInit का

कन्स्ट्रक्टर केवळ DI करावा; इनपुट अजून तेथे बांधलेले नाहीत. `ngOnInit` Angular ने कम्पोनेंट आणि त्याचे इनपुट सेट केल्यानंतर चालते — स्टार्टअप लॉजिकसाठी योग्य स्थान.

## हे का महत्वाचे आहे

लाइफसायकल हूक्स तुम्हाला योग्य वेळी लॉजिक चालू करू देतात — `ngOnInit` मध्ये प्रारंभीकरण करा, `ngAfterViewInit` मध्ये रेंडर केलेले व्यू अ्याक्सेस करा, आणि महत्वाचे म्हणजे **`ngOnDestroy` मध्ये क्लीनअप करा** (Observable वरून अनसबस्क्राइब करणे Angular मध्ये मेमरी लीक्स टाळण्याचा #1 मार्ग आहे).

प्रत्येक हूकचा क्रम आणि भूमिका जाणून घेणे योग्य डेटा फेचिंग, DOM ऍक्सेस आणि संसाधन व्यवस्थापनासाठी आवश्यक आहे.