Angular को component lifecycle hooks के हुन्?

Question

Accepted Answer

**Lifecycle hooks** Angular ले component को जीवनमा निर्दिष्ट समयमा कल गर्ने methods हुन् — सृजना, input परिवर्तन, rendering, र नष्टीकरण। तपाई आफनो component class मा interface methods थपेर तिनलाई लागू गर्नुहुन्छ।

## मुख्य hooks क्रममा

```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`** — initialization र data fetching को लागि मानक स्थान (constructor को विपरीत, `@Input`s यहाँ उपलब्ध छन्)।
- **`ngAfterViewInit`** — जब child views र `@ViewChild` references अस्तित्वमा छन्।
- **`ngOnDestroy`** — सफाई: Observables बाट अनसबस्क्राइब गर्नुहोस्, timers हटाउनुहोस्, listeners हटाउनुहोस्।

## Constructor भन्दा ngOnInit किन

Constructor ले केवल DI गर्नुपर्छ; inputs यहाँ bound छैनन्। `ngOnInit` Angular ले component र यसको inputs सेटअप गरेपछि चलिन्छ — startup logic को सही स्थान।

## यो किन महत्त्वपूर्ण छ

Lifecycle hooks ले तपाईलाई सही समयमा logic चलाउन दिन्छ — `ngOnInit` मा initialize गर्नुहोस्, `ngAfterViewInit` मा rendered view पहुँच गर्नुहोस्, र महत्त्वपूर्ण रूपमा **`ngOnDestroy` मा सफाई गर्नुहोस्** (Observables बाट अनसबस्क्राइब गर्नु Angular मा memory leaks बाँध्ने #1 तरीका हो)।

प्रत्येक hook को क्रम र भूमिका जान्नु data fetching, DOM access, र resource management को लागि आवश्यक छ।