Angular માં ઘટક જીવનચક્ર હુક્સ શું છે?

Question

Accepted Answer

**Lifecycle hooks** એ પદ્ધતિઓ છે જે Angular ઘટકના જીવનમાં ચોક્કસ ક્ષણે કૉલ કરે છે — નિર્માણ, ઇનપુટ પરિવર્તન, રેન્ડરિંગ અને વિનાશ. તમે તમારા ઘટક વર્ગમાં ઇન્ટરફેસ પદ્ધતિઓ ઉમેરીને તેને અમલમાં મૂકો છો.

## 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`** — આરંભ અને ડેટા ફેચિંગ માટે પ્રમાણભૂત સ્થાન (કન્સ્ટ્રક્ટરથી વિપરીત, `@Input`s અહીં ઉપલબ્ધ છે).
- **`ngAfterViewInit`** — જ્યારે બાળ દૃશ્ય અને `@ViewChild` સંદર્ભ અસ્તિત્વમાં હોય.
- **`ngOnDestroy`** — સફાઈ: Observables થી અનસબસ્ક્રાઇબ કરો, ટાઇમર સાફ કરો, શ્રોતાઓ દૂર કરો.

## Why ngOnInit over the constructor

કન્સ્ટ્રક્ટર માત્ર DI કરવું જોઈએ; ઇનપુટ્સ હજી બાંધવામાં આવ્યા નથી. `ngOnInit` Angular દ્વારા ઘટક અને તેના ઇનપુટ્સ સેટ કર્યા પછી ચાલે છે — આરંભણ તર્કનું યોગ્ય સ્થાન.

## શા માટે તે મહત્વનું છે

જીવનચક્ર હુક્સ તમને યોગ્ય સમયે તર્ક ચલાવવા દે છે — `ngOnInit` માં શરૂ કરો, `ngAfterViewInit` માં રેન્ડર કરેલ દૃશ્ય ઍક્સેસ કરો, અને અત્યંત મહત્વપૂર્ણ રીતે `ngOnDestroy` માં **સફાઈ કરો** (Observables થી અનસબસ્ક્રાઇબ કરવું Angular માં મેમરી લીક કાઢવાનો #1 રસ્તો છે).

પ્રત્યેક હુકનો ક્રમ અને ભૂમિકા જાણવી સાચી ડેટા ફેચિંગ, DOM ઍક્સેસ અને સંસાધન ব્યવસ્થાપન માટે આવશ્યક છે.